From 66850c8e9b909c8339903f14196f45884a67f4cd Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 12:09:11 +0200
Subject: [PATCH 01/82] Implement table view and Portfolio content

---
 app/assets/locales/locale-en.json             |   6 +-
 .../stylesheets/components/_account.scss      |  72 ++++
 app/components/Account/AccountLeftPanel.jsx   |   2 +-
 app/components/Account/AccountOverview.jsx    | 314 +++++++++++-------
 app/components/Icon/Icon.jsx                  |   3 +-
 app/components/Icon/deposit.svg               |   5 +
 app/components/Icon/dollar.svg                |   5 +
 app/components/Icon/settle.svg                |   7 +
 app/components/Icon/trade.svg                 |   5 +
 app/components/Icon/transfer.svg              |   8 +
 app/components/Icon/withdraw.svg              |   5 +
 app/components/Utility/AssetName.jsx          |   2 +-
 app/components/Utility/BalanceComponent.jsx   |  20 +-
 .../Utility/EquivalentValueComponent.jsx      |   7 +-
 app/components/Utility/Tabs.jsx               |  27 +-
 app/components/Utility/TotalBalanceValue.jsx  |   8 +-
 16 files changed, 355 insertions(+), 141 deletions(-)
 create mode 100644 app/components/Icon/deposit.svg
 create mode 100644 app/components/Icon/dollar.svg
 create mode 100644 app/components/Icon/settle.svg
 create mode 100644 app/components/Icon/trade.svg
 create mode 100644 app/components/Icon/transfer.svg
 create mode 100644 app/components/Icon/withdraw.svg

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 0e1c2a9a43..d19ebf2597 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -364,7 +364,11 @@
     "propose_from": "Propose From",
     "settle": "Settle",
     "no_orders": "No open orders",
-    "asset_details": "Asset details"
+    "asset_details": "Asset details",
+    "portfolio": "Portfolio",
+    "activity": "Activity",
+    "eq_value_header": "Value (%(asset)s)",
+    "qty": "Qty"
   },
   "pagination": {
     "newer": "Newer",
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index cfda717b25..b5818297c3 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -107,3 +107,75 @@
 a.action-button > span {
     text-transform: lowercase;
 }
+
+ul.account-overview {
+    li {
+        > a {
+            font-size: 1rem;
+            color: grey;
+            background-color: #1A242F;
+            &:hover {
+                background-color: #1A242F;
+                color: white;
+            }
+            > span.tab-title {
+            }
+
+            > span.tab-subtext {
+                font-size: 85%;
+                color: #7ED321;
+            }
+        }
+        &.is-active > a {
+            color: white;
+            background-color: #1A242F;
+             > span.tab-title {
+             }
+        }
+        &.total-value {
+            > a {
+                cursor: default;
+                background-color: #27384B;
+                > span.tab-title {
+                    font-size: 95%;
+                }
+                &:hover > span.tab-title {
+                    color: grey;
+                }
+            }
+        }
+    }
+}
+
+table.table.dashboard-table {
+    > thead > tr > th {
+        background-color: #1A242F;
+        color: white;
+        font-weight: 600;
+        text-align: center;
+    }
+    > tbody > tr {
+        > td {
+            font-size: 0.9rem;
+            background-color: #27384B;
+            color: white;
+            border: 1px solid #323131;
+            text-align: center;
+        }
+        &.total-value {
+            td {
+                padding: 8px 5px;
+                background-color: #1A242F;
+            }
+            td:first-of-type {
+                text-align: left;
+                text-transform: uppercase;
+                font-weight: 600;
+            }
+            td:nth-child(3) {
+                color: #7ED321;
+                font-weight: 600;
+            }
+        }
+    }
+}
diff --git a/app/components/Account/AccountLeftPanel.jsx b/app/components/Account/AccountLeftPanel.jsx
index c29aaf7c8a..f570904f17 100644
--- a/app/components/Account/AccountLeftPanel.jsx
+++ b/app/components/Account/AccountLeftPanel.jsx
@@ -91,7 +91,7 @@ class AccountLeftPanel extends React.Component {
 							<ul className="account-left-menu" style={{marginBottom: 0}}>
 								<li><Link to={`/account/${account_name}/overview/`} activeClassName="active"><Translate content="account.overview"/></Link></li>
 								<li><Link to={`/account/${account_name}/member-stats/`} activeClassName="active"><Translate content="account.member.stats"/></Link></li>
-								<li><Link to={`/account/${account_name}/orders/`} activeClassName="active"><Translate content="account.open_orders"/></Link></li>
+								{/* <li><Link to={`/account/${account_name}/orders/`} activeClassName="active"><Translate content="account.open_orders"/></Link></li> */}
 								<li><Link to={`/account/${account_name}/voting/`} activeClassName="active"><Translate content="account.voting"/></Link></li>
 
 								{/* <li className="menu-subheader" >
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 78ff46f69d..48e38e98cf 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -25,6 +25,7 @@ import SimpleDepositWithdraw from "../Dashboard/SimpleDepositWithdraw";
 import SimpleDepositBlocktradesBridge from "../Dashboard/SimpleDepositBlocktradesBridge";
 import { Apis } from "bitsharesjs-ws";
 import GatewayActions from "actions/GatewayActions";
+import {Tabs, Tab} from "../Utility/Tabs";
 
 class AccountOverview extends React.Component {
 
@@ -115,17 +116,17 @@ class AccountOverview extends React.Component {
                     backing_asset={asset.getIn(["bitasset", "options", "short_backing_asset"])}
                     account={account}
                 />,
-                borrowLink: !isBitAsset ? null : <a onClick={() => {ReactTooltip.hide();this.refs[modalRef].show();}}><Translate content="exchange.borrow" /></a>
+                borrowLink: !isBitAsset ? null : <a onClick={() => {ReactTooltip.hide();this.refs[modalRef].show();}}><Icon name="dollar" className="icon-14px" /></a>
             };
         };
 
         let balances = [], openOrders = [];
+        const emptyCell = "-";
         balanceList.forEach( balance => {
             let balanceObject = ChainStore.getObject(balance);
             let asset_type = balanceObject.get("asset_type");
             let asset = ChainStore.getObject(asset_type);
 
-
             let assetInfoLinks;
             let marketLink, directMarketLink, settleLink, transferLink;
             let symbol = "";
@@ -143,8 +144,8 @@ class AccountOverview extends React.Component {
             const marketURL = `/market/${asset.get("symbol")}_${preferredMarket}`;
 
             marketLink = notCore ? <a href={marketURL} onClick={this._onNavigate.bind(this, marketURL)}><AssetName name={asset.get("symbol")} /> : <AssetName name={preferredMarket} /></a> : null;
-            directMarketLink = notCore ? <Link to={`/market/${asset.get("symbol")}_${preferredMarket}`}><Translate content="account.trade" /></Link> : null;
-            transferLink = <Link to={`/transfer?asset=${asset.get("id")}`}><Translate content="transaction.trxTypes.transfer" /></Link>;
+            directMarketLink = notCore ? <Link to={`/market/${asset.get("symbol")}_${preferredMarket}`}><Icon name="trade" className="icon-14px" /></Link> : emptyCell;
+            transferLink = <Link to={`/transfer?asset=${asset.get("id")}`}><Icon name="transfer" className="icon-14px" /></Link>;
 
             let {isBitAsset, borrowModal, borrowLink} = renderBorrow(asset, this.props.account);
             // if (isBitAsset) {
@@ -163,7 +164,8 @@ class AccountOverview extends React.Component {
 
             /* Popover content */
             settleLink = <a href onClick={this._onSettleAsset.bind(this, asset.get("id"))}>
-                <Translate content="account.settle"/></a>;
+                <Icon name="settle" className="icon-14px" />
+            </a>;
             assetInfoLinks = (
             <ul>
                 <li><a href={assetDetailURL} onClick={this._onNavigate.bind(this, assetDetailURL)}><Translate content="account.asset_details"/></a></li>
@@ -202,45 +204,53 @@ class AccountOverview extends React.Component {
             }
             balances.push(
                 <tr key={asset.get("symbol")} style={{maxWidth: "100rem"}}>
+                    <td style={{textAlign: "left"}}><AssetName name={asset.get("symbol")} /></td>
                     <td style={{textAlign: "right"}}>
-                        {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} assetInfo={assetInfoLinks}/> : null}
+                        {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} hide_asset /> : null}
                     </td>
                     <td style={{textAlign: "right"}} className="column-hide-small">
-                        {hasBalance || hasOnOrder ? <BalanceValueComponent balance={balance} toAsset={preferredUnit}/> : null}
+                        {hasBalance || hasOnOrder ? <BalanceValueComponent balance={balance} toAsset={preferredUnit} hide_asset/> : null}
                     </td>
                     {showAssetPercent ? <td style={{textAlign: "right"}}>
                         {hasBalance ? <BalanceComponent balance={balance} asPercentage={true}/> : null}
                     </td> : null}
-                    <td style={{textAlign: "center"}}>
+                    <td>
                         {transferLink}
+                    </td>
+                    <td>
+                        {canBuy && this.props.isMyAccount ?
+                        <span>
+                            <a onClick={this._showDepositWithdraw.bind(this, "bridge_modal", assetName, false)}>
+                                <Icon name="dollar" className="icon-14px" />
+                            </a>
+                        </span> : emptyCell}
+                    </td>
+                    <td>
                         {canDepositWithdraw && this.props.isMyAccount? (
                             <span>
-                                {this._getSeparator(hasBalance || hasOnOrder)}
                                 <a onClick={this._showDepositWithdraw.bind(this, "deposit_modal", assetName, false)}>
-                                    <Translate content="gateway.deposit" />
+                                    <Icon name="deposit" className="icon-14px" />
                                 </a>
                             </span>
-                        ) : null}
+                        ) : emptyCell}
+                    </td>
+                    <td>
                         {canWithdraw && this.props.isMyAccount? (
                             <span>
-                                {this._getSeparator(canDepositWithdraw || hasBalance)}
                                 <a className={!canWithdraw ? "disabled" : ""} onClick={canWithdraw ? this._showDepositWithdraw.bind(this, "withdraw_modal", assetName, false) : () => {}}>
-                                    <Translate content="modal.withdraw.submit" />
+                                    <Icon name="withdraw" className="icon-14px" />
                                 </a>
                             </span>
-                        ) : null}
-                        {canBuy && this.props.isMyAccount ?
-                        <span>
-                            {this._getSeparator(hasBalance || hasOnOrder || canDepositWithdraw)}
-                            <a onClick={this._showDepositWithdraw.bind(this, "bridge_modal", assetName, false)}>
-                                <Translate content="exchange.buy" />
-                            </a>
-                        </span> : null}
+                        ) : emptyCell}
                     </td>
-                    <td style={{textAlign: "center"}}>
+                    <td>
                         {directMarketLink}
-                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: symbol})}>{this._getSeparator(true)}{borrowLink}{borrowModal}</div> : null}
-                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.settle", {asset: symbol})}>{this._getSeparator(true)}{settleLink}</div> : null}
+                    </td>
+                    <td>
+                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: symbol})}>{borrowLink}{borrowModal}</div> : null}
+                    </td>
+                    <td>
+                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.settle", {asset: symbol})}>{settleLink}</div> : null}
                     </td>
                     <td style={{textAlign: "center"}} className="column-hide-small" data-place="bottom" data-tip={counterpart.translate("tooltip." + (includeAsset ? "hide_asset" : "show_asset"))}>
                         <a style={{marginRight: 0}} className={includeAsset ? "order-cancel" : "action-plus"} onClick={this._hideAsset.bind(this, asset_type, includeAsset)}>
@@ -282,34 +292,41 @@ class AccountOverview extends React.Component {
                     let {market} = assetUtils.parseDescription(asset.getIn(["options", "description"]));
                     if (asset.get("symbol").indexOf("OPEN.") !== -1 && !market) market = "USD";
                     let preferredMarket = market ? market : core_asset ? core_asset.get("symbol") : "BTS";
-                    let directMarketLink = notCore ? <Link to={`/market/${asset.get("symbol")}_${preferredMarket}`}><Translate content="account.trade" /></Link> : null;
+                    let directMarketLink = notCore ? <Link to={`/market/${asset.get("symbol")}_${preferredMarket}`}><Icon name="trade" className="icon-14px" /></Link> : emptyCell;
                     let {isBitAsset, borrowModal, borrowLink} = renderBorrow(asset, this.props.account);
                     if (includeAsset && visible || !includeAsset && !visible) balances.push(
                         <tr key={"zz" + a} style={{maxWidth: "100rem"}}>
-                            <td style={{textAlign: "right"}}>
+                            <td style={{textAlign: "left"}}>
                                 <AssetName name={a} />
                             </td>
-                            <td></td>
-                            <td colSpan="1" style={{textAlign: "center"}}>
-                                {canDepositWithdraw && this.props.isMyAccount ?
-                                <span>
-                                    <a onClick={this._showDepositWithdraw.bind(this, "deposit_modal", a, false)}>
-                                        <Translate content="gateway.deposit" />
-                                    </a>
-                                </span> : null}
-
+                            <td colSpan="3"></td>
+                            <td style={{textAlign: "center"}}>
                                 {canBuy  && this.props.isMyAccount ?
                                 <span>
-                                    {this._getSeparator(canDepositWithdraw)}
                                     <a onClick={this._showDepositWithdraw.bind(this, "bridge_modal", a, false)}>
-                                        <Translate content="exchange.buy" />
+                                        <Icon name="dollar" className="icon-14px" />
                                     </a>
-                                </span> : null}
+                                </span> : emptyCell}
                             </td>
+                            <td>
+                                {canDepositWithdraw && this.props.isMyAccount ?
+                                <span>
+                                    <a onClick={this._showDepositWithdraw.bind(this, "deposit_modal", a, false)}>
+                                        <Icon name="deposit" className="icon-14px" />
+                                    </a>
+                                </span> : emptyCell}
+                            </td>
+                            <td></td>
                             <td style={{textAlign: "center"}}>
                                 {directMarketLink}
-                                {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: asset.get("symbol")})}> {this._getSeparator(!!directMarketLink)}{borrowLink}{borrowModal}</div> : null}
                             </td>
+                            <td>
+                                {isBitAsset ?
+                                    <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: asset.get("symbol")})}>
+                                        {borrowLink}{borrowModal}
+                                    </div> : emptyCell}
+                            </td>
+                            <td></td>
                             <td style={{textAlign: "center"}} className="column-hide-small" data-place="bottom" data-tip={counterpart.translate("tooltip." + (includeAsset ? "hide_asset" : "show_asset"))}>
                                 <a style={{marginRight: 0}} className={includeAsset ? "order-cancel" : "action-plus"} onClick={this._hideAsset.bind(this, asset.get("id"), includeAsset)}>
                                     <Icon name={includeAsset ? "cross-circle" : "plus-circle"} className="icon-14px" />
@@ -321,7 +338,7 @@ class AccountOverview extends React.Component {
             });
 
             if (balances.length !== currentIndex) {
-                balances.splice(currentIndex + 1, 0, <tr style={{backgroundColor: "transparent"}} key={"hidden_" + currentIndex} ><td style={{height: 20}} colSpan="5"></td></tr>);
+                balances.splice(currentIndex + 1, 0, <tr style={{backgroundColor: "transparent"}} key={"hidden_" + currentIndex} ><td style={{height: 20}} colSpan="11"></td></tr>);
             }
         }
 
@@ -353,7 +370,7 @@ class AccountOverview extends React.Component {
         let call_orders = [], collateral = 0, debt = {};
 
         if (account.toJS && account.has("call_orders")) call_orders = account.get("call_orders").toJS();
-        let includedBalances, hiddenBalances, includedOrders, hiddenOrders, hasOpenOrders = false;
+        let includedBalances, hiddenBalances, includedOrders, hiddenOrders;
         let account_balances = account.get("balances");
 
         let includedBalancesList = Immutable.List(), hiddenBalancesList = Immutable.List();
@@ -397,23 +414,50 @@ class AccountOverview extends React.Component {
             let hidden = this._renderBalances(hiddenBalancesList, this.state.alwaysShowAssets);
             hiddenBalances = hidden.balances;
             hiddenOrders = hidden.openOrders;
-
-            hasOpenOrders = hiddenOrders.length || includedOrders.length;
         }
 
         if (hiddenBalances) {
-            hiddenBalances.unshift(<tr style={{backgroundColor: "transparent"}} key="hidden"><td style={{height: 20}} colSpan="4"></td></tr>);
+            hiddenBalances.unshift(<tr style={{backgroundColor: "transparent"}} key="hidden"><td style={{height: 20}} colSpan="11"></td></tr>);
         }
 
         let totalBalanceList = includedBalancesList.concat(hiddenBalancesList);
-        let totalBalance = totalBalanceList.size ?
+        let totalBalance =
             <TotalBalanceValue
+                noTip
                 balances={totalBalanceList}
                 openOrders={orders}
                 debt={debt}
                 collateral={collateral}
-                label="account.estimate_value"
-            /> : null;
+            />;
+        let totalBalanceNoSymbol =
+            <TotalBalanceValue
+                noTip
+                balances={totalBalanceList}
+                openOrders={orders}
+                debt={debt}
+                collateral={collateral}
+                hide_asset
+            />;
+        let portFolioBalance =
+            <TotalBalanceValue
+                noTip
+                balances={totalBalanceList}
+            />;
+        let ordersBalance =
+            <TotalBalanceValue
+                noTip
+                balances={Immutable.List()}
+                openOrders={orders}
+            />;
+        let collateralBalance =
+            <TotalBalanceValue
+                noTip
+                balances={Immutable.List()}
+                debt={debt}
+                collateral={collateral}
+            />;
+
+        includedBalances.push(<tr key="portfolio" className="total-value"><td><Translate content="account.portfolio" /></td><td></td><td style={{textAlign: "right"}}>{totalBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -426,74 +470,121 @@ class AccountOverview extends React.Component {
         }) || {};
         const currentBridges = this.props.bridgeCoins.get(this.state.bridgeAsset) || null;
 
+        let preferredUnit = settings.get("unit") || "1.3.0";
+        const preferredAsset = ChainStore.getAsset(preferredUnit);
+        let assetName = !!preferredAsset ? preferredAsset.get("symbol") : "";
+        if (preferredAsset) {
+            const {prefix, name} = utils.replaceName(assetName, !!preferredAsset.get("bitasset_data_id"));
+            assetName = prefix + name;
+        }
+        const hiddenSubText = <span style={{visibility: "hidden"}}>H</span>;
+
         return (
             <div className="grid-content" style={{overflowX: "hidden"}}>
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
-                        <div className="block-content-header" style={{position: "relative"}}>
-                            <Translate content="transfer.balances" />
-                            {hiddenBalances && hiddenBalances.length - 1 > 0 ? <div
-                                className="button outline small column-hide-small no-margin"
-                                style={{position: "absolute", top: 0, right: 0}}
-                                onClick={this._toggleHiddenAssets.bind(this)}
-                            >
-                                <Translate content={`account.${showHidden ? "hide_hidden" : "show_hidden"}`} /><span> ({hiddenBalances.reduce((count, a) => {if (a.key.indexOf("hidden") === -1) return count + 1; return count;}, 0)})</span>
-                            </div> : null}
-                        </div>
-                        <table className="table">
-                            <thead>
-                                <tr>
-                                    {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
-                                    <th style={{textAlign: "right"}}><Translate component="span" content="account.asset" /></th>
-                                    {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
-                                    <th style={{textAlign: "right"}} className="column-hide-small"><Translate component="span" content="account.eq_value" /></th>
-                                    {showAssetPercent ? <th style={{textAlign: "right"}}><Translate component="span" content="account.percent" /></th> : null}
-                                    <th style={{textAlign: "center"}}>
-                                        <Translate content="account.transfer_actions" />
-                                    </th>
-                                    <th style={{textAlign: "center"}}>
-                                        <Translate content="account.market_actions" />
-                                    </th>
-                                    <th></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {includedBalances}
-                                {totalBalanceList.size > 1 ?
-                                <tr className="tooltip" data-place="bottom" data-tip={counterpart.translate("account.total_estimate")} style={{backgroundColor: "transparent"}}>
-                                    <td colSpan="2" style={{textAlign: "right", fontWeight: "bold", paddingTop: 20}}>
-                                        <span>{totalBalance}</span>
-                                    </td>
-                                </tr> : null}
-                                {showHidden ? hiddenBalances : null}
-
-                                {/* Open orders */}
-                                {hasOpenOrders ? <tr style={{backgroundColor: "transparent"}}><td style={{height: 20}} colSpan="4"></td></tr> : null}
-                                {hasOpenOrders ? <tr style={{backgroundColor: "transparent"}}>
-                                    <td colSpan="5" className="no-padding">
+                        <Tabs segmented={false} setting="overviewTab" tabsClass="account-overview no-padding bordered-header content-block">
+                            <Tab disabled className="total-value" title="account.eq_value" subText={totalBalance}>
+
+                            </Tab>
+
+                            <Tab title="account.portfolio" subText={portFolioBalance}>
+                                <table className="table dashboard-table">
+                                    <thead>
+                                        <tr>
+                                            {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
+                                            <th style={{textAlign: "left"}}><Translate component="span" content="account.asset" /></th>
+                                            <th style={{textAlign: "right"}}><Translate content="account.qty" /></th>
+                                            {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
+                                            <th style={{textAlign: "right"}} className="column-hide-small">
+                                                {preferredAsset ? <Translate component="span" content="account.eq_value_header" asset={assetName} /> : null}
+                                            </th>
+                                            {showAssetPercent ? <th style={{textAlign: "right"}}><Translate component="span" content="account.percent" /></th> : null}
+                                            <th><Translate content="header.payments" /></th>
+                                            <th><Translate content="exchange.buy" /></th>
+                                            <th><Translate content="modal.deposit.submit" /></th>
+                                            <th><Translate content="modal.withdraw.submit" /></th>
+                                            <th><Translate content="account.trade" /></th>
+                                            <th><Translate content="exchange.borrow" /></th>
+                                            <th><Translate content="account.settle" /></th>
+                                            <th>{/* Hide/show asset column */}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {includedBalances}
+                                        {showHidden ? hiddenBalances : null}
+                                    </tbody>
+                                </table>
+
+                                {hiddenBalances && hiddenBalances.length - 1 > 0 ? <div
+                                    className="button outline small column-hide-small no-margin"
+                                    style={{position: "relative", top: 10}}
+                                    onClick={this._toggleHiddenAssets.bind(this)}
+                                >
+                                    <Translate content={`account.${showHidden ? "hide_hidden" : "show_hidden"}`} /><span> ({hiddenBalances.reduce((count, a) => {if (a.key.indexOf("hidden") === -1) return count + 1; return count;}, 0)})</span>
+                                </div> : null}
+                            </Tab>
+
+                            <Tab title="account.open_orders" subText={ordersBalance}>
+                                <table className="table">
+                                    <thead>
+                                        <tr>
+                                            {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
+                                            <th style={{textAlign: "right"}}><Translate component="span" content="account.asset" /></th>
+                                            {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
+                                            <th style={{textAlign: "right"}} className="column-hide-small"><Translate component="span" content="account.eq_value" /></th>
+                                            {showAssetPercent ? <th style={{textAlign: "right"}}><Translate component="span" content="account.percent" /></th> : null}
+                                            <th style={{textAlign: "center"}}>
+                                                <Translate content="account.transfer_actions" />
+                                            </th>
+                                            <th style={{textAlign: "center"}}>
+                                                <Translate content="account.market_actions" />
+                                            </th>
+                                            <th></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {/* Open orders */}
+                                        {includedOrders}
+                                        {hiddenOrders}
+                                    </tbody>
+                                </table>
+                            </Tab>
+
+                            <Tab title="account.collaterals" subText={collateralBalance}>
+                                {call_orders.length > 0 ? (
+
+                                <div className="content-block">
+                                    <div className="generic-bordered-box">
                                         <div className="block-content-header">
-                                            <Translate content="account.open_orders" />
+                                            <Translate content="account.collaterals" />
                                         </div>
-                                    </td>
-                                </tr>  : null}
-                                {includedOrders}
-                                {hiddenOrders}
-                            </tbody>
-                        </table>
-                        <SettleModal ref="settlement_modal" asset={this.state.settleAsset} account={account.get("name")}/>
-                    </div>
-                </div>
+                                        <CollateralPosition callOrders={call_orders} account={account} />
+                                    </div>
+                                </div>) : null}
+                            </Tab>
 
-                {call_orders.length > 0 ? (
+                            <Tab title="markets.title" subText={hiddenSubText}>
 
-                <div className="content-block">
-                    <div className="generic-bordered-box">
-                        <div className="block-content-header">
-                            <Translate content="account.collaterals" />
-                        </div>
-                        <CollateralPosition callOrders={call_orders} account={account} />
+                            </Tab>
+
+                            <Tab title="account.activity" subText={hiddenSubText}>
+                                <RecentTransactions
+                                    accountsList={Immutable.fromJS([account.get("id")])}
+                                    compactView={false}
+                                    showMore={true}
+                                    fullHeight={true}
+                                    limit={10}
+                                    showFilters={true}
+                                />
+                            </Tab>
+                        </Tabs>
+
+
+
+                        <SettleModal ref="settlement_modal" asset={this.state.settleAsset} account={account.get("name")}/>
                     </div>
-                </div>) : null}
+                </div>
 
                 {account.get("proposals") && account.get("proposals").size ?
                 <div className="content-block">
@@ -503,17 +594,6 @@ class AccountOverview extends React.Component {
                     <Proposals account={account.get("id")}/>
                 </div> : null}
 
-                <div className="content-block">
-                    <RecentTransactions
-                        accountsList={Immutable.fromJS([account.get("id")])}
-                        compactView={false}
-                        showMore={true}
-                        fullHeight={true}
-                        limit={10}
-                        showFilters={true}
-                    />
-                </div>
-
                 {/* Deposit Modal */}
                 <SimpleDepositWithdraw
                     ref="deposit_modal"
diff --git a/app/components/Icon/Icon.jsx b/app/components/Icon/Icon.jsx
index b405bcd57f..cfe1a198e6 100644
--- a/app/components/Icon/Icon.jsx
+++ b/app/components/Icon/Icon.jsx
@@ -6,7 +6,8 @@ let icons = ["user", "trash", "chevron-down", "menu", "database", "download", "s
     "plus-circle", "question-circle", "cross-circle", "cog", "layers", "users", "wand", "b-logo",
     "accounts", "witnesses", "assets", "proposals", "blocks", "committee_members", "workers", "key",
     "checkmark-circle", "checkmark", "piggy", "locked", "unlocked" , "markets", "fi-star" ,"fees",
-    "thumb-tack", "clock", "clippy", "shuffle"];
+    "thumb-tack", "clock", "clippy", "shuffle", "transfer", "dollar", "deposit", "withdraw",
+    "settle", "trade"];
 
 let icons_map = {};
 for (let i of icons) icons_map[i] = require(`./${i}.svg`);
diff --git a/app/components/Icon/deposit.svg b/app/components/Icon/deposit.svg
new file mode 100644
index 0000000000..4a294ad6cf
--- /dev/null
+++ b/app/components/Icon/deposit.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>download</title>
+<path d="M16 18l8-8h-6v-8h-4v8h-6zM23.273 14.727l-2.242 2.242 8.128 3.031-13.158 4.907-13.158-4.907 8.127-3.031-2.242-2.242-8.727 3.273v8l16 6 16-6v-8z"></path>
+</svg>
diff --git a/app/components/Icon/dollar.svg b/app/components/Icon/dollar.svg
new file mode 100644
index 0000000000..77c02d5b95
--- /dev/null
+++ b/app/components/Icon/dollar.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>coin-dollar</title>
+<path d="M15 2c-8.284 0-15 6.716-15 15s6.716 15 15 15c8.284 0 15-6.716 15-15s-6.716-15-15-15zM15 29c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12zM16 16v-4h4v-2h-4v-2h-2v2h-4v8h4v4h-4v2h4v2h2v-2h4l-0-8h-4zM14 16h-2v-4h2v4zM18 22h-2v-4h2v4z"></path>
+</svg>
diff --git a/app/components/Icon/settle.svg b/app/components/Icon/settle.svg
new file mode 100644
index 0000000000..e74c15a19f
--- /dev/null
+++ b/app/components/Icon/settle.svg
@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flag</title>
+<path d="M0 0h4v32h-4v-32z"></path>
+<path d="M26 20.094c2.582 0 4.83-0.625 6-1.547v-16c-1.17 0.922-3.418 1.547-6 1.547s-4.83-0.625-6-1.547v16c1.17 0.922 3.418 1.547 6 1.547z"></path>
+<path d="M19 1.016c-1.466-0.623-3.61-1.016-6-1.016-3.012 0-5.635 0.625-7 1.547v16c1.365-0.922 3.988-1.547 7-1.547 2.39 0 4.534 0.393 6 1.016v-16z"></path>
+</svg>
diff --git a/app/components/Icon/trade.svg b/app/components/Icon/trade.svg
new file mode 100644
index 0000000000..b56384a9bc
--- /dev/null
+++ b/app/components/Icon/trade.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>stats-bars</title>
+<path d="M0 26h32v4h-32zM4 18h4v6h-4zM10 10h4v14h-4zM16 16h4v8h-4zM22 4h4v20h-4z"></path>
+</svg>
diff --git a/app/components/Icon/transfer.svg b/app/components/Icon/transfer.svg
new file mode 100644
index 0000000000..e28c7f36e6
--- /dev/null
+++ b/app/components/Icon/transfer.svg
@@ -0,0 +1,8 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tab</title>
+<path d="M30 0h2v16h-2v-16z"></path>
+<path d="M0 16h2v16h-2v-16z"></path>
+<path d="M10 22h22v4h-22v5l-7-7 7-7v5z"></path>
+<path d="M22 10h-22v-4h22v-5l7 7-7 7z"></path>
+</svg>
diff --git a/app/components/Icon/withdraw.svg b/app/components/Icon/withdraw.svg
new file mode 100644
index 0000000000..5f03b03c1c
--- /dev/null
+++ b/app/components/Icon/withdraw.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>upload</title>
+<path d="M14 18h4v-8h6l-8-8-8 8h6zM20 13.5v3.085l9.158 3.415-13.158 4.907-13.158-4.907 9.158-3.415v-3.085l-12 4.5v8l16 6 16-6v-8z"></path>
+</svg>
diff --git a/app/components/Utility/AssetName.jsx b/app/components/Utility/AssetName.jsx
index 064b8c0573..9525989b79 100644
--- a/app/components/Utility/AssetName.jsx
+++ b/app/components/Utility/AssetName.jsx
@@ -56,7 +56,7 @@ class AssetName extends React.Component {
 
 			return (
 				<div
-					className="tooltip inline-block"
+					className={"inline-block" + (this.props.noTip ? "" : " tooltip")}
 					data-tip={tooltip}
 					data-place={this.props.dataPlace}
 					data-html={true}
diff --git a/app/components/Utility/BalanceComponent.jsx b/app/components/Utility/BalanceComponent.jsx
index 28b1910d2e..031748cf3e 100644
--- a/app/components/Utility/BalanceComponent.jsx
+++ b/app/components/Utility/BalanceComponent.jsx
@@ -13,13 +13,27 @@ class BalanceComponent extends React.Component {
 
     static propTypes = {
         balance: ChainTypes.ChainObject.isRequired,
-        assetInfo: React.PropTypes.node
-    }
+        assetInfo: React.PropTypes.node,
+        hide_asset: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+        hide_asset: false
+    };
 
     render() {
         let amount = Number(this.props.balance.get("balance"));
         let type = this.props.balance.get("asset_type");
-        return (<FormattedAsset amount={amount} asset={type} asPercentage={this.props.asPercentage} assetInfo={this.props.assetInfo} replace={this.props.replace} />);
+        return (
+            <FormattedAsset
+                amount={amount}
+                asset={type}
+                asPercentage={this.props.asPercentage}
+                assetInfo={this.props.assetInfo}
+                replace={this.props.replace}
+                hide_asset={this.props.hide_asset}
+            />
+        );
     }
 }
 
diff --git a/app/components/Utility/EquivalentValueComponent.jsx b/app/components/Utility/EquivalentValueComponent.jsx
index a00134241c..5bfdc1e901 100644
--- a/app/components/Utility/EquivalentValueComponent.jsx
+++ b/app/components/Utility/EquivalentValueComponent.jsx
@@ -31,7 +31,8 @@ class ValueComponent extends React.Component {
     static defaultProps = {
         toAsset: "1.3.0",
         fullPrecision: true,
-        noDecimals: false
+        noDecimals: false,
+        hide_asset: false
     };
 
     constructor() {
@@ -129,7 +130,7 @@ class ValueComponent extends React.Component {
             return <div className="tooltip inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.no_price")} style={{fontSize: "0.9rem"}}><Translate content="account.no_price" /></div>;
         }
 
-        return <FormattedAsset noPrefix amount={eqValue} asset={toID} decimalOffset={toSymbol.indexOf("BTC") !== -1 ? 4 : this.props.noDecimals ? toAsset.get("precision") : 0}/>;
+        return <FormattedAsset hide_asset={this.props.hide_asset} noPrefix amount={eqValue} asset={toID} decimalOffset={toSymbol.indexOf("BTC") !== -1 ? 4 : this.props.noDecimals ? toAsset.get("precision") : 0}/>;
     }
 }
 ValueComponent = BindToChainState(ValueComponent, {keep_updating: true});
@@ -161,7 +162,7 @@ class BalanceValueComponent extends React.Component {
         let amount = Number(this.props.balance.get("balance"));
         let fromAsset = this.props.balance.get("asset_type");
 
-        return <EquivalentValueComponent amount={amount} fromAsset={fromAsset} noDecimals={true} toAsset={this.props.toAsset}/>;
+        return <EquivalentValueComponent hide_asset={this.props.hide_asset} amount={amount} fromAsset={fromAsset} noDecimals={true} toAsset={this.props.toAsset}/>;
     }
 }
 BalanceValueComponent = BindToChainState(BalanceValueComponent, {keep_updating: true});
diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
index d228dcc34e..2bbe5c9272 100644
--- a/app/components/Utility/Tabs.jsx
+++ b/app/components/Utility/Tabs.jsx
@@ -28,21 +28,26 @@ class Tab extends React.Component {
         title: PropTypes.string.isRequired,
         changeTab: PropTypes.func,
         isActive: PropTypes.bool.isRequired,
-        index: PropTypes.number.isRequired
+        index: PropTypes.number.isRequired,
+        className: PropTypes.string
     };
 
     static defaultProps = {
         isActive: false,
-        index: 0
+        index: 0,
+        className: ""
     };
 
     render() {
-        let {isActive, index, changeTab, title} = this.props;
-        let c = cnames({"is-active": isActive});
+        let {isActive, index, changeTab, title, className, disabled} = this.props;
+        let c = cnames({"is-active": isActive}, className);
 
         return (
-            <li className={c} onClick={changeTab.bind(this, index)}>
-                <a>{title.indexOf(".") > 0 ? <Translate content={title} /> : title}</a>
+            <li className={c} onClick={!disabled ? changeTab.bind(this, index) : null}>
+                <a>
+                    {title.indexOf(".") > 0 ? <Translate className="tab-title" content={title} /> : title}
+                    {this.props.subText ? <span className="tab-subtext"><br />{this.props.subText}</span> : null}
+                </a>
             </li>
         );
     }
@@ -52,12 +57,14 @@ class Tabs extends React.Component {
 
     static propTypes = {
         setting: PropTypes.string,
-        defaultActiveTab: PropTypes.number
+        defaultActiveTab: PropTypes.number,
+        segmented: PropTypes.bool
     };
 
     static defaultProps = {
         active: 0,
-        defaultActiveTab: 0
+        defaultActiveTab: 0,
+        segmented: true
     };
 
     constructor(props) {
@@ -87,7 +94,7 @@ class Tabs extends React.Component {
     }
 
     render() {
-        let {children, contentClass, tabsClass, style} = this.props;
+        let {children, contentClass, tabsClass, style, segmented} = this.props;
 
         let activeContent = null;
 
@@ -116,7 +123,7 @@ class Tabs extends React.Component {
         return (
             <div className={this.props.className}>
                 <div className="service-selector">
-                    <ul style={style} className={cnames("button-group segmented no-margin", tabsClass)}>
+                    <ul style={style} className={cnames("button-group no-margin", tabsClass, {segmented})}>
                         {tabs}
                     </ul>
                 </div>
diff --git a/app/components/Utility/TotalBalanceValue.jsx b/app/components/Utility/TotalBalanceValue.jsx
index 2b2cea4b33..b92708bb9e 100644
--- a/app/components/Utility/TotalBalanceValue.jsx
+++ b/app/components/Utility/TotalBalanceValue.jsx
@@ -252,14 +252,14 @@ class TotalValue extends React.Component {
             return(
                 <span>
                     {!!this.props.label ? (<span className="font-secondary"><Translate content={this.props.label} />: </span>) : null}
-                    <FormattedAsset noPrefix amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
+                    <FormattedAsset noTip={this.props.noTip} noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
                 </span>
             );
         } else {
             return (
                 <div className="tooltip inline-block" data-tip={totalsTip} data-place="bottom" data-html={true} >
                     {!!this.props.label ? (<span className="font-secondary"><Translate content={this.props.label} />: </span>) : null}
-                    <FormattedAsset noTip noPrefix amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
+                    <FormattedAsset noTip noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
                 </div>
             );
         }
@@ -300,7 +300,7 @@ class TotalBalanceValue extends React.Component {
     };
 
     render() {
-        let {balances, toAsset, collateral, debt, openOrders, inHeader} = this.props;
+        let {balances, collateral, debt, openOrders, inHeader} = this.props;
         let assets = Immutable.List();
         let amounts = [];
 
@@ -323,7 +323,7 @@ class TotalBalanceValue extends React.Component {
             }
         }
 
-        return <ValueStoreWrapper label={this.props.label} inHeader={inHeader} balances={amounts} openOrders={openOrders} debt={debt} collateral={collateral} fromAssets={assets}/>;
+        return <ValueStoreWrapper label={this.props.label} hide_asset={this.props.hide_asset} noTip={this.props.noTip} inHeader={inHeader} balances={amounts} openOrders={openOrders} debt={debt} collateral={collateral} fromAssets={assets}/>;
     }
 }
 TotalBalanceValue = BindToChainState(TotalBalanceValue, {keep_updating: true});

From b7b2435b4eaee7e3a036b175d2edfc7652738e2c Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 13:30:02 +0200
Subject: [PATCH 02/82] First pass at Open Orders table

---
 .../stylesheets/components/_account.scss      |  1 +
 app/components/Account/AccountOrders.jsx      | 33 ++++++------
 app/components/Account/AccountOverview.jsx    | 48 +++++++----------
 app/components/Exchange/MyOpenOrders.jsx      | 52 +++++++++++++++++--
 4 files changed, 83 insertions(+), 51 deletions(-)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index b5818297c3..a9d70f83ba 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -175,6 +175,7 @@ table.table.dashboard-table {
             td:nth-child(3) {
                 color: #7ED321;
                 font-weight: 600;
+                text-align: right;
             }
         }
     }
diff --git a/app/components/Account/AccountOrders.jsx b/app/components/Account/AccountOrders.jsx
index 52c8eaa6df..86867bfa6c 100644
--- a/app/components/Account/AccountOrders.jsx
+++ b/app/components/Account/AccountOrders.jsx
@@ -83,6 +83,9 @@ class AccountOrders extends React.Component {
                         invert={true}
                         onCancel={this._cancelLimitOrder.bind(this, order.id)}
                         price={price.full}
+                        dashboard
+                        isMyAccount={this.props.isMyAccount}
+                        settings={this.props.settings}
                     />
                 );
             }
@@ -94,30 +97,24 @@ class AccountOrders extends React.Component {
         for (let market in marketOrders) {
             if (marketOrders[market].length) {
                 tables.push(
-                    <div key={market} style={marketIndex > 0 ? {paddingTop: "1rem"} : {}}>
-                    <h5 style={{paddingLeft: 20, marginBottom: 5}}>
-                        <MarketLink quote={markets[market].quote.id} base={markets[market].base.id} />
-                    </h5>
-                    <div className="exchange-bordered">
-                            <table className="table table-striped text-right ">
-                                <TableHeader baseSymbol={markets[market].base.symbol} quoteSymbol={markets[market].quote.symbol}/>
-                                <tbody>
-                                    {marketOrders[market].sort((a, b) => {
-                                        return a.props.price - b.props.price;
-                                    })}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
+                    <tbody key={market}>
+                        {marketIndex > 0 ? <tr><td colSpan={this.props.isMyAccount ? "7" : "6"}></td></tr> : null}
+                        {marketOrders[market].sort((a, b) => {
+                            return a.props.price - b.props.price;
+                        })}
+                    </tbody>
                 );
                 marketIndex++;
             }
         }
 
         return (
-            <div className="grid-content no-overflow" style={{minWidth: "50rem", paddingBottom: 15}}>
-                {!tables.length ? <p><Translate content="account.no_orders" /></p> : null}
-                {tables}
+            <div className="grid-content no-overflow no-padding" style={{paddingBottom: 15}}>
+                <table className="table table-striped dashboard-table">
+                    <TableHeader settings={this.props.settings} dashboard isMyAccount={this.props.isMyAccount}/>
+                    {tables}
+                    {this.props.children}
+                </table>
             </div>
         );
     }
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 48e38e98cf..9452a3e18e 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -26,6 +26,7 @@ import SimpleDepositBlocktradesBridge from "../Dashboard/SimpleDepositBlocktrade
 import { Apis } from "bitsharesjs-ws";
 import GatewayActions from "actions/GatewayActions";
 import {Tabs, Tab} from "../Utility/Tabs";
+import AccountOrders from "./AccountOrders";
 
 class AccountOverview extends React.Component {
 
@@ -429,19 +430,16 @@ class AccountOverview extends React.Component {
                 debt={debt}
                 collateral={collateral}
             />;
-        let totalBalanceNoSymbol =
+        let portFolioBalance =
             <TotalBalanceValue
                 noTip
                 balances={totalBalanceList}
-                openOrders={orders}
-                debt={debt}
-                collateral={collateral}
-                hide_asset
             />;
-        let portFolioBalance =
+        let portFolioBalanceNoSymbol =
             <TotalBalanceValue
                 noTip
                 balances={totalBalanceList}
+                hide_asset
             />;
         let ordersBalance =
             <TotalBalanceValue
@@ -449,6 +447,13 @@ class AccountOverview extends React.Component {
                 balances={Immutable.List()}
                 openOrders={orders}
             />;
+        let ordersBalanceNoSymbol =
+            <TotalBalanceValue
+                noTip
+                balances={Immutable.List()}
+                openOrders={orders}
+                hide_asset
+            />;
         let collateralBalance =
             <TotalBalanceValue
                 noTip
@@ -457,7 +462,7 @@ class AccountOverview extends React.Component {
                 collateral={collateral}
             />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td><Translate content="account.portfolio" /></td><td></td><td style={{textAlign: "right"}}>{totalBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td><Translate content="account.portfolio" /></td><td></td><td style={{textAlign: "right"}}>{portFolioBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -526,29 +531,16 @@ class AccountOverview extends React.Component {
                             </Tab>
 
                             <Tab title="account.open_orders" subText={ordersBalance}>
-                                <table className="table">
-                                    <thead>
-                                        <tr>
-                                            {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
-                                            <th style={{textAlign: "right"}}><Translate component="span" content="account.asset" /></th>
-                                            {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
-                                            <th style={{textAlign: "right"}} className="column-hide-small"><Translate component="span" content="account.eq_value" /></th>
-                                            {showAssetPercent ? <th style={{textAlign: "right"}}><Translate component="span" content="account.percent" /></th> : null}
-                                            <th style={{textAlign: "center"}}>
-                                                <Translate content="account.transfer_actions" />
-                                            </th>
-                                            <th style={{textAlign: "center"}}>
-                                                <Translate content="account.market_actions" />
-                                            </th>
-                                            <th></th>
-                                        </tr>
-                                    </thead>
+                                <AccountOrders {...this.props}>
                                     <tbody>
-                                        {/* Open orders */}
-                                        {includedOrders}
-                                        {hiddenOrders}
+                                        <tr className="total-value">
+                                            <td colSpan="2">Open orders</td>
+                                            <td colSpan="3"></td>
+                                            <td style={{textAlign: "center"}}>{ordersBalanceNoSymbol}</td>
+                                            {this.props.isMyAccount ? <td></td> : null}
+                                        </tr>
                                     </tbody>
-                                </table>
+                                </AccountOrders>
                             </Tab>
 
                             <Tab title="account.collaterals" subText={collateralBalance}>
diff --git a/app/components/Exchange/MyOpenOrders.jsx b/app/components/Exchange/MyOpenOrders.jsx
index 24ad53efbe..54e792bd45 100644
--- a/app/components/Exchange/MyOpenOrders.jsx
+++ b/app/components/Exchange/MyOpenOrders.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {PropTypes} from "react";
-import classNames from "classnames";
 import {FormattedDate} from "react-intl";
 import Ps from "perfect-scrollbar";
 import utils from "common/utils";
@@ -11,13 +10,17 @@ import AssetName from "../Utility/AssetName";
 import Icon from "../Icon/Icon";
 import { ChainStore } from "bitsharesjs/es";
 import { LimitOrder, CallOrder } from "common/MarketClasses";
+const rightAlign = {textAlign: "right"};
+const leftAlign = {textAlign: "left"};
+import { EquivalentValueComponent } from "../Utility/EquivalentValueComponent";
 
 class TableHeader extends React.Component {
 
     render() {
-        let {baseSymbol, quoteSymbol} = this.props;
+        let {baseSymbol, quoteSymbol, dashboard, isMyAccount, settings} = this.props;
+        let preferredUnit = settings ? settings.get("unit") : "1.3.0";
 
-        return (
+        return !dashboard ? (
             <thead>
                 <tr>
                     <th><Translate className="header-sub-title" content="exchange.price" /></th>
@@ -27,6 +30,19 @@ class TableHeader extends React.Component {
                     <th />
                 </tr>
             </thead>
+        ) : (
+            <thead>
+                <tr>
+                    <th style={leftAlign}>Asset 1</th>
+                    <th style={leftAlign}>Asset 2</th>
+                    <th style={rightAlign}>Qty</th>
+                    <th style={rightAlign}>Total</th>
+                    <th style={rightAlign}><Translate content="exchange.price" /></th>
+                    <th>Order Value (<AssetName name={preferredUnit} />)</th>
+                    {/* <th><Translate content="transaction.expiration" /></th> */}
+                    {isMyAccount ? <th><Translate content="wallet.cancel" /></th> : null}
+                </tr>
+            </thead>
         );
     }
 }
@@ -48,7 +64,7 @@ class OrderRow extends React.Component {
     }
 
     render() {
-        let {base, quote, order, showSymbols} = this.props;
+        let {base, quote, order, showSymbols, dashboard, isMyAccount, settings} = this.props;
         const isBid = order.isBid();
         const isCall = order.isCall();
         let tdClass = isCall ? "orderHistoryCall" : isBid ? "orderHistoryBid" : "orderHistoryAsk";
@@ -56,8 +72,9 @@ class OrderRow extends React.Component {
         let priceSymbol = showSymbols ? <span>{` ${base.get("symbol")}/${quote.get("symbol")}`}</span> : null;
         let valueSymbol = showSymbols ? " " + base.get("symbol") : null;
         let amountSymbol = showSymbols ? " " + quote.get("symbol") : null;
+        let preferredUnit = settings ? settings.get("unit") : "1.3.0";
 
-        return (
+        return !dashboard ? (
             <tr key={order.id}>
                 <td className={tdClass}>
                     <PriceText price={order.getPrice()} base={base} quote={quote} />
@@ -77,6 +94,31 @@ class OrderRow extends React.Component {
                     </a>}
                 </td>
             </tr>
+        ) : (
+            <tr key={order.id}>
+                <td style={leftAlign}><AssetName name={quote.get("symbol")} /></td>
+                <td style={leftAlign}><AssetName name={base.get("symbol")} /></td>
+                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountForSale" : "amountToReceive"]().getAmount({real: true}), quote.get("precision"))} {amountSymbol}</td>
+                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountToReceive" : "amountForSale"]().getAmount({real: true}), base.get("precision"))} {valueSymbol}</td>
+                <td className={tdClass} style={rightAlign}>
+                    <PriceText price={order.getPrice()} base={base} quote={quote} />
+                    {priceSymbol}
+                </td>
+                <td>
+                    <EquivalentValueComponent hide_asset amount={order.amountForSale().getAmount()} fromAsset={order.amountForSale().asset_id} noDecimals={true} toAsset={preferredUnit}/>
+                </td>
+                {/* <td>
+                    {isCall ? null : <FormattedDate
+                        value={order.expiration}
+                        format="short"
+                    />}
+                </td> */}
+                {isMyAccount ? <td className="text-center" style={{ padding: "2px 5px"}}>
+                    {isCall ? null : <a style={{marginRight: 0}} className="order-cancel" onClick={this.props.onCancel}>
+                        <Icon name="cross-circle" className="icon-14px" />
+                    </a>}
+                </td> : null}
+            </tr>
         );
         // }
     }

From c2d8ff4eb1d45ef24d5cc0dcd9c0bc42f87dbf89 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 15:22:01 +0200
Subject: [PATCH 03/82] First pass at Margin Positions

---
 app/components/Account/AccountOverview.jsx    |  5 +--
 .../Blockchain/CollateralPosition.jsx         | 36 +++++++++++++------
 app/components/Icon/Icon.jsx                  |  2 +-
 app/components/Icon/adjust.svg                |  6 ++++
 app/components/Icon/icon.scss                 |  6 ++--
 5 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 app/components/Icon/adjust.svg

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 9452a3e18e..473dd57780 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -548,10 +548,7 @@ class AccountOverview extends React.Component {
 
                                 <div className="content-block">
                                     <div className="generic-bordered-box">
-                                        <div className="block-content-header">
-                                            <Translate content="account.collaterals" />
-                                        </div>
-                                        <CollateralPosition callOrders={call_orders} account={account} />
+                                        <CollateralPosition className="dashboard-table" callOrders={call_orders} account={account} />
                                     </div>
                                 </div>) : null}
                             </Tab>
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index cccde01a7a..0e267bd7f4 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -10,8 +10,11 @@ import WalletDb from "stores/WalletDb";
 import Translate from "react-translate-component";
 import utils from "common/utils";
 import counterpart from "counterpart";
+import Icon from "../Icon/Icon";
 
 const wallet_api = new WalletApi();
+const alignRight = {textAlign: "right"};
+const alignLeft = {textAlign: "left"};
 /**
  *  Given a collateral position object (call order), displays it in a pretty way
  *
@@ -145,14 +148,18 @@ class CollateralPosition extends React.Component {
 
         return (
             <tr className="margin-row">
-                <td>
+                <td style={alignLeft}>
+                    <AssetName name={debtAsset.get("symbol")} />
+                </td>
+                <td style={alignRight}>
                     <FormattedAsset
                         amount={co.debt}
                         asset={co.call_price.quote.asset_id}
                         assetInfo={assetInfoLinks}
+                        hide_asset
                     />
                 </td>
-                <td className="column-hide-medium">
+                <td style={alignRight} className="column-hide-medium">
                     <FormattedAsset
                         decimalOffset={5}
                         amount={co.collateral}
@@ -165,8 +172,10 @@ class CollateralPosition extends React.Component {
                         decimals={2}
                         base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
                         quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
+                        hide_symbols
                     />
                 </td>
+                <td><AssetName name={debtAsset.get("symbol")} />/<AssetName name={collateralAsset.get("symbol")} /></td>
 
                 <td>
                     <div
@@ -175,16 +184,18 @@ class CollateralPosition extends React.Component {
                         style={{paddingBottom: 5}}
                     >
                         <a onClick={this._onUpdatePosition.bind(this)}>
-                            <Translate content="borrow.adjust" />
+                            <Icon name="adjust" className="icon-14px rotate90" />
                         </a>
                     </div>
+                </td>
+                <td>
                     <div
                         data-place="left"
                         data-tip={counterpart.translate("tooltip.close_position", {amount: d, asset: debtAsset.get("symbol")})}
                         style={{paddingBottom: 5}}
                     >
                         <a onClick={this._onClosePosition.bind(this)}>
-                            <Translate content="borrow.close" />
+                            <Icon name="cross-circle" className="icon-14px" />
                         </a>
                     </div>
                     {debtAsset ? (
@@ -218,25 +229,28 @@ class CollateralPositionWrapper extends React.Component {
 
 CollateralPositionWrapper = BindToChainState(CollateralPositionWrapper, {keep_updating: true});
 
-const CollateralTable = ({callOrders, account}) => {
+const CollateralTable = ({callOrders, account, className}) => {
 
     return (
-        <table className="table">
+        <table className={"table " + className}>
             <thead>
             <tr>
-                <th><Translate content="transaction.borrow_amount" /></th>
-                <th className="column-hide-medium"><Translate content="transaction.collateral" /></th>
-                <th style={{textAlign: "center"}}>
+                <th style={alignLeft}><Translate content="transaction.borrow_amount" /></th>
+                <th style={alignRight}><Translate content="account.qty" /></th>
+                <th style={alignRight} className="column-hide-medium"><Translate content="transaction.collateral" /></th>
+                <th>
                     <div className="tooltip inline-block" data-place="top" data-tip={counterpart.translate("tooltip.coll_ratio")}>
                         <Translate content="borrow.coll_ratio" />
                     </div>
                 </th>
-                <th style={{textAlign: "center"}} className="column-hide-small">
+                <th className="column-hide-small">
                     <div className="tooltip inline-block" data-place="top" data-tip={counterpart.translate("tooltip.call_price")}>
                         <Translate content="exchange.call" />
                     </div>
                 </th>
-                <th></th>
+                <th>Units</th>
+                <th>Adjust</th>
+                <th>Close</th>
             </tr>
             </thead>
             <tbody>
diff --git a/app/components/Icon/Icon.jsx b/app/components/Icon/Icon.jsx
index cfe1a198e6..a2d8601ce1 100644
--- a/app/components/Icon/Icon.jsx
+++ b/app/components/Icon/Icon.jsx
@@ -7,7 +7,7 @@ let icons = ["user", "trash", "chevron-down", "menu", "database", "download", "s
     "accounts", "witnesses", "assets", "proposals", "blocks", "committee_members", "workers", "key",
     "checkmark-circle", "checkmark", "piggy", "locked", "unlocked" , "markets", "fi-star" ,"fees",
     "thumb-tack", "clock", "clippy", "shuffle", "transfer", "dollar", "deposit", "withdraw",
-    "settle", "trade"];
+    "settle", "trade", "adjust"];
 
 let icons_map = {};
 for (let i of icons) icons_map[i] = require(`./${i}.svg`);
diff --git a/app/components/Icon/adjust.svg b/app/components/Icon/adjust.svg
new file mode 100644
index 0000000000..8f589b8a43
--- /dev/null
+++ b/app/components/Icon/adjust.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" >
+<title>embed</title>
+<path d="M18 23l3 3 10-10-10-10-3 3 7 7z"></path>
+<path d="M14 9l-3-3-10 10 10 10 3-3-7-7z"></path>
+</svg>
diff --git a/app/components/Icon/icon.scss b/app/components/Icon/icon.scss
index fc63d673c2..6a45ea5c8e 100644
--- a/app/components/Icon/icon.scss
+++ b/app/components/Icon/icon.scss
@@ -3,8 +3,6 @@
   top: 1px;
 }
 
-
-
 .icon > svg, span.icon {
   width: 1rem;
   height: 1rem;
@@ -50,3 +48,7 @@
 .icon.fill-black > svg > path {
     fill:black;
 }
+
+.icon.rotate90 > svg {
+    transform: rotate(90deg);
+}

From 5bd1592339b4c6ef4e3c6bdf0da38d9e3a110161 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 15:58:49 +0200
Subject: [PATCH 04/82] First pass at Activity tab

---
 .../stylesheets/components/_account.scss      |  1 +
 app/components/Account/AccountOverview.jsx    |  3 +-
 app/components/Account/RecentTransactions.jsx | 87 ++++++++++---------
 app/components/Blockchain/Operation.jsx       |  4 +-
 app/components/Icon/Icon.jsx                  |  2 +-
 app/components/Icon/excel.svg                 |  6 ++
 6 files changed, 59 insertions(+), 44 deletions(-)
 create mode 100644 app/components/Icon/excel.svg

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index a9d70f83ba..fe83178e1d 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -164,6 +164,7 @@ table.table.dashboard-table {
         }
         &.total-value {
             td {
+                vertical-align: middle;
                 padding: 8px 5px;
                 background-color: #1A242F;
             }
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 473dd57780..31699ca070 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -563,8 +563,9 @@ class AccountOverview extends React.Component {
                                     compactView={false}
                                     showMore={true}
                                     fullHeight={true}
-                                    limit={10}
+                                    limit={15}
                                     showFilters={true}
+                                    dashboard
                                 />
                             </Tab>
                         </Tabs>
diff --git a/app/components/Account/RecentTransactions.jsx b/app/components/Account/RecentTransactions.jsx
index 9789829135..7e17c2e50d 100644
--- a/app/components/Account/RecentTransactions.jsx
+++ b/app/components/Account/RecentTransactions.jsx
@@ -9,8 +9,11 @@ import {ChainTypes as grapheneChainTypes} from "bitsharesjs/es";
 import TransitionWrapper from "../Utility/TransitionWrapper";
 import ps from "perfect-scrollbar";
 import counterpart from "counterpart";
+import Icon from "../Icon/Icon";
 
 const {operations} = grapheneChainTypes;
+const alignLeft = {textAlign: "left"};
+const alignRight = {textAlign: "right"};
 
 function compareOps(b, a) {
     if (a.block_num === b.block_num) {
@@ -191,11 +194,12 @@ class RecentTransactions extends React.Component {
             });
         }
 
-        const display_history = history.length ?
+        let display_history = history.length ?
             history.slice(0, limit)
             .map(o => {
                 return (
                     <Operation
+                        style={alignLeft}
                         key={o.id}
                         op={o.op}
                         result={o.result}
@@ -206,45 +210,47 @@ class RecentTransactions extends React.Component {
                         hideOpLabel={compactView}
                     />
                 );
-            }) : <tr><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>;
+            }) : [<tr><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>];
+        display_history.push(
+            <tr className="total-value">
+                <td style={alignLeft}>
+                    {this.props.showFilters ? (
+                        <select data-place="left" data-tip={counterpart.translate("tooltip.filter_ops")} style={{paddingTop: 5}} className="bts-select no-margin" value={this.state.filter} onChange={this._onChangeFilter.bind(this)}>{options}</select>
+                    ) : null}
+                </td>
+                <td style={alignRight}>
+                    {historyCount > 0 ?
+                    <span>
+                        <a
+                            className="inline-block"
+                            onClick={this._downloadCSV.bind(this)}
+                            data-tip={counterpart.translate("transaction.csv_tip")}
+                            data-place="bottom"
+                        >
+                            <Icon name="excel" className="icon-14px" />
+                        </a>
+
+                    </span> : null}
+                </td>
+                <td style={{textAlign: "center"}}>
+                    &nbsp;{this.props.showMore && historyCount > this.props.limit || 20 && limit < historyCount ? (
+                        <a onClick={this._onIncreaseLimit.bind(this)}>
+                            <Icon name="chevron-down" className="icon-14px" />
+                        </a>
+                    ) : null}
+                </td>
+            </tr>
+        );
 
         return (
             <div className="recent-transactions no-overflow" style={style}>
                 <div className="generic-bordered-box">
-                    <div ref="header">
+                    {this.props.dashboard ? null : <div ref="header">
 
                         <div className="block-content-header">
                             <span>{this.props.title ? this.props.title : <Translate content="account.recent" />}</span>
-
-                            {historyCount > 0 ?
-                            <span style={{fontSize: "60%", textTransform: "lowercase"}}>
-                                &nbsp;(
-                                <a
-                                    className="inline-block"
-                                    onClick={this._downloadCSV.bind(this)}
-                                    data-tip={counterpart.translate("transaction.csv_tip")}
-                                    data-place="bottom"
-                                >
-                                    <Translate content="transaction.csv" />
-                                </a>
-                                )
-                            </span> : null}
-
-                            {this.props.showFilters ? (
-                            <div className="float-right">
-                                <select data-place="left" data-tip={counterpart.translate("tooltip.filter_ops")} style={{paddingTop: 0}} className="bts-select" value={this.state.filter} onChange={this._onChangeFilter.bind(this)}>{options}</select>
-                            </div>) : null}
                         </div>
-
-                        <table className={"table" + (compactView ? " compact" : "")}>
-                            <thead>
-                                <tr>
-                                    {compactView ? null : <th className="column-hide-tiny" style={{width: "20%"}}><Translate content="explorer.block.op" /></th>}
-                                    <th><Translate content="account.votes.info" /></th>
-                                </tr>
-                            </thead>
-                        </table>
-                    </div>
+                    </div>}
 
                     <div
                         className="box-content grid-block no-margin"
@@ -252,7 +258,14 @@ class RecentTransactions extends React.Component {
                             maxHeight: maxHeight - headerHeight
                         } : null}
                         ref="transactions">
-                        <table className={"table" + (compactView ? " compact" : "")}>
+                        <table className={"table" + (compactView ? " compact" : "") + (this.props.dashboard ? " dashboard-table" : "")}>
+                            <thead>
+                                <tr>
+                                    {compactView ? null : <th style={alignLeft} className="column-hide-tiny"><Translate content="explorer.block.op" /></th>}
+                                    <th style={alignLeft}><Translate content="account.votes.info" /></th>
+                                    <th></th>
+                                </tr>
+                            </thead>
                             <TransitionWrapper
                                 component="tbody"
                                 transitionName="newrow"
@@ -287,13 +300,7 @@ class RecentTransactions extends React.Component {
                     </div>
                 }
                 </div>
-                {this.props.showMore && historyCount > this.props.limit || 20 && limit < historyCount ? (
-                    <div className="account-info more-button">
-                        <button className="button outline small" onClick={this._onIncreaseLimit.bind(this)}>
-                            <Translate content="account.more" />
-                        </button>
-                    </div>
-                    ) : null}
+
             </div>
         );
     }
diff --git a/app/components/Blockchain/Operation.jsx b/app/components/Blockchain/Operation.jsx
index 0a1178284b..20f9f74e2f 100644
--- a/app/components/Blockchain/Operation.jsx
+++ b/app/components/Blockchain/Operation.jsx
@@ -88,10 +88,10 @@ class Row extends React.Component {
         return (
                 <tr>
                     {hideOpLabel ? null : (
-                        <td style={{width: "20%"}} className="left-td column-hide-tiny">
+                        <td style={{textAlign: "left"}} className="left-td column-hide-tiny">
                             <Link className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.show_block", {block: utils.format_number(this.props.block, 0)})} to={`/block/${this.props.block}`}><TransactionLabel color={color} type={type} /></Link>
                         </td>)}
-                    <td style={{padding: "8px 5px"}}>
+                    <td style={{padding: "8px 5px", textAlign: "left"}}>
                         <div>
                             <span>{this.props.info}</span>
                         </div>
diff --git a/app/components/Icon/Icon.jsx b/app/components/Icon/Icon.jsx
index a2d8601ce1..6b4044d91d 100644
--- a/app/components/Icon/Icon.jsx
+++ b/app/components/Icon/Icon.jsx
@@ -7,7 +7,7 @@ let icons = ["user", "trash", "chevron-down", "menu", "database", "download", "s
     "accounts", "witnesses", "assets", "proposals", "blocks", "committee_members", "workers", "key",
     "checkmark-circle", "checkmark", "piggy", "locked", "unlocked" , "markets", "fi-star" ,"fees",
     "thumb-tack", "clock", "clippy", "shuffle", "transfer", "dollar", "deposit", "withdraw",
-    "settle", "trade", "adjust"];
+    "settle", "trade", "adjust", "excel"];
 
 let icons_map = {};
 for (let i of icons) icons_map[i] = require(`./${i}.svg`);
diff --git a/app/components/Icon/excel.svg b/app/components/Icon/excel.svg
new file mode 100644
index 0000000000..e0f69ce5a3
--- /dev/null
+++ b/app/components/Icon/excel.svg
@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>file-excel</title>
+<path d="M23.22 12h-4.228l-2.992 4.407-2.992-4.407h-4.228l5.068 7.577-5.718 8.423h7.87v-2.862h-1.567l1.567-2.344 3.481 5.205h4.389l-5.718-8.423 5.068-7.577z"></path>
+<path d="M28.681 7.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378 0-2.5 1.121-2.5 2.5v27c0 1.378 1.121 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-19.5c0-0.448-0.137-1.23-1.319-2.841v0zM24.543 5.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268v0zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-23c-0.271 0-0.5-0.229-0.5-0.5v-27c0-0.271 0.229-0.5 0.5-0.5 0 0 15.499-0 15.5 0v7c0 0.552 0.448 1 1 1h7v19.5z"></path>
+</svg>

From 6524dc441a5fc1a33fc4ba44580d5d42db7b2b69 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 16:11:27 +0200
Subject: [PATCH 05/82] Refactor table account colors to theme templates

---
 .../stylesheets/components/_account.scss      | 26 --------
 .../stylesheets/themes/_dark-theme.scss       | 16 ++++-
 .../stylesheets/themes/_light-theme.scss      | 16 ++++-
 .../stylesheets/themes/_ol-dark-theme.scss    | 16 ++++-
 .../stylesheets/themes/_theme-template.scss   | 59 ++++++++++++++++++-
 5 files changed, 103 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index fe83178e1d..563292bb53 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -112,36 +112,17 @@ ul.account-overview {
     li {
         > a {
             font-size: 1rem;
-            color: grey;
-            background-color: #1A242F;
-            &:hover {
-                background-color: #1A242F;
-                color: white;
-            }
-            > span.tab-title {
-            }
 
             > span.tab-subtext {
                 font-size: 85%;
-                color: #7ED321;
             }
         }
-        &.is-active > a {
-            color: white;
-            background-color: #1A242F;
-             > span.tab-title {
-             }
-        }
         &.total-value {
             > a {
                 cursor: default;
-                background-color: #27384B;
                 > span.tab-title {
                     font-size: 95%;
                 }
-                &:hover > span.tab-title {
-                    color: grey;
-                }
             }
         }
     }
@@ -149,24 +130,18 @@ ul.account-overview {
 
 table.table.dashboard-table {
     > thead > tr > th {
-        background-color: #1A242F;
-        color: white;
         font-weight: 600;
         text-align: center;
     }
     > tbody > tr {
         > td {
             font-size: 0.9rem;
-            background-color: #27384B;
-            color: white;
-            border: 1px solid #323131;
             text-align: center;
         }
         &.total-value {
             td {
                 vertical-align: middle;
                 padding: 8px 5px;
-                background-color: #1A242F;
             }
             td:first-of-type {
                 text-align: left;
@@ -174,7 +149,6 @@ table.table.dashboard-table {
                 font-weight: 600;
             }
             td:nth-child(3) {
-                color: #7ED321;
                 font-weight: 600;
                 text-align: right;
             }
diff --git a/app/assets/stylesheets/themes/_dark-theme.scss b/app/assets/stylesheets/themes/_dark-theme.scss
index aa0820adb1..154053863a 100644
--- a/app/assets/stylesheets/themes/_dark-theme.scss
+++ b/app/assets/stylesheets/themes/_dark-theme.scss
@@ -35,6 +35,14 @@ $header-color: #484848;
 // Chat colors
 $chat-text-color: #191A1F;
 
+// Account table view colors
+$account-header: #1A242F;
+$account-cells: #27384B;
+$account-green: #7ED321;
+$account-primarytext: white;
+$account-dimmed: #606060;
+$account-border: #323131;
+
 .darkTheme {
   @include theme(
     $primary-text-color,
@@ -61,6 +69,12 @@ $chat-text-color: #191A1F;
     $row-accent-color,
     $header-color,
     $chat-text-color,
-    $input-background
+    $input-background,
+    $account-header,
+    $account-cells,
+    $account-green,
+    $account-primarytext,
+    $account-dimmed,
+    $account-border
   );
 }
diff --git a/app/assets/stylesheets/themes/_light-theme.scss b/app/assets/stylesheets/themes/_light-theme.scss
index 95d4e8dac2..249f8aba50 100644
--- a/app/assets/stylesheets/themes/_light-theme.scss
+++ b/app/assets/stylesheets/themes/_light-theme.scss
@@ -36,6 +36,14 @@ $header-color: #DCDCDC;
 // Chat colors
 $chat-text-color: #191A1F;
 
+// Account table view colors
+$account-header: #1A242F;
+$account-cells: #27384B;
+$account-green: #7ED321;
+$account-primarytext: white;
+$account-dimmed: #606060;
+$account-border: #323131;
+
 .lightTheme {
   @include theme(
     $primary-text-color,
@@ -62,7 +70,13 @@ $chat-text-color: #191A1F;
     $row-accent-color,
     $header-color,
     $chat-text-color,
-    $input-background
+    $input-background,
+    $account-header,
+    $account-cells,
+    $account-green,
+    $account-primarytext,
+    $account-dimmed,
+    $account-border
   );
 
   .change-up {
diff --git a/app/assets/stylesheets/themes/_ol-dark-theme.scss b/app/assets/stylesheets/themes/_ol-dark-theme.scss
index de8001078f..8fca7da7c5 100644
--- a/app/assets/stylesheets/themes/_ol-dark-theme.scss
+++ b/app/assets/stylesheets/themes/_ol-dark-theme.scss
@@ -35,6 +35,14 @@ $header-color: #484848;
 // Chat colors
 $chat-text-color: #191A1F;
 
+// Account table view colors
+$account-header: #1A242F;
+$account-cells: #27384B;
+$account-green: #7ED321;
+$account-primarytext: white;
+$account-dimmed: #606060;
+$account-border: #323131;
+
 .olDarkTheme {
   @include theme(
     $primary-text-color,
@@ -61,6 +69,12 @@ $chat-text-color: #191A1F;
     $row-accent-color,
     $header-color,
     $chat-text-color,
-    $input-background
+    $input-background,
+    $account-header,
+    $account-cells,
+    $account-green,
+    $account-primarytext,
+    $account-dimmed,
+    $account-border
   );
 }
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index 4d3a4580d1..fa442a2429 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -25,7 +25,13 @@
   $row-accent-color,
   $header-color,
   $chat-text-color,
-  $input-background
+  $input-background,
+  $account-header,
+  $account-cells,
+  $account-green,
+  $account-primarytext,
+  $account-dimmed,
+  $account-border
   ) {
 
   .font-secondary {
@@ -1233,6 +1239,57 @@
         font-weight: bold;
         color: $info-color;
     }
+
+    /* Table view account */
+    ul.account-overview {
+        li {
+            > a {
+                color: $account-dimmed;
+                background-color: $account-header;
+                &:hover {
+                    background-color: $account-header;
+                    color: $account-primarytext;
+                }
+                > span.tab-subtext {
+                    color: $account-green;
+                }
+            }
+            &.is-active > a {
+                color: $account-primarytext;
+                background-color: $account-header;
+            }
+            &.total-value {
+                > a {
+                    background-color: $account-cells;
+                    &:hover > span.tab-title {
+                        color: $account-dimmed;
+                    }
+                }
+            }
+        }
+    }
+
+    table.table.dashboard-table {
+        > thead > tr > th {
+            background-color: $account-header;
+            color: $account-primarytext;
+        }
+        > tbody > tr {
+            > td {
+                background-color: $account-cells;
+                color: $account-primarytext;
+                border: 1px solid $account-border;
+            }
+            &.total-value {
+                td {
+                    background-color: $account-header;
+                }
+                td:nth-child(3) {
+                    color: $account-green;
+                }
+            }
+        }
+    }
 }
 
 .olDarkTheme .gate_fee .amount-selector {

From 866ecdcafca0817d4627eaee4187347019f85d12 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 29 Sep 2017 16:20:13 +0200
Subject: [PATCH 06/82] Rename overview route to Dashboard

---
 app/Routes-dev.jsx                            | 5 +++--
 app/Routes.jsx                                | 5 +++--
 app/components/Account/AccountLeftPanel.jsx   | 2 +-
 app/components/Account/AccountOverview.jsx    | 3 ++-
 app/components/Account/RecentTransactions.jsx | 4 ++--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/Routes-dev.jsx b/app/Routes-dev.jsx
index 8eff22a0da..265792dd56 100644
--- a/app/Routes-dev.jsx
+++ b/app/Routes-dev.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Router, Route, IndexRoute, browserHistory, hashHistory } from "react-router/es";
+import { Router, Route, IndexRoute, browserHistory, hashHistory, Redirect } from "react-router/es";
 import willTransitionTo from "./routerTransition";
 import App from "./App";
 
@@ -108,7 +108,7 @@ const routes = (
 
         <Route path="/account/:account_name" component={AccountPage} >
             <IndexRoute component={AccountOverview} />
-            <Route path="overview" component={AccountOverview} />
+            <Route path="dashboard" component={AccountOverview} />
             <Route path="assets" component={AccountAssets} />
             <Route path="create-asset" component={AccountAssetCreate} />
             <Route path="update-asset/:asset" component={AccountAssetUpdate} />
@@ -119,6 +119,7 @@ const routes = (
             <Route path="deposit-withdraw" component={AccountDepositWithdraw} />
             <Route path="orders" component={AccountOrders} />
             <Route path="whitelist" component={AccountWhitelist} />
+            <Redirect from="overview" to="dashboard" />
         </Route>
 
         <Route path="deposit-withdraw" component={AccountDepositWithdraw} />
diff --git a/app/Routes.jsx b/app/Routes.jsx
index 65d9ea54c5..5f5d7bc966 100644
--- a/app/Routes.jsx
+++ b/app/Routes.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Route, IndexRoute } from "react-router/es";
+import { Route, IndexRoute, Redirect } from "react-router/es";
 import willTransitionTo from "./routerTransition";
 import App from "./App";
 
@@ -161,7 +161,7 @@ const routes = (
             <IndexRoute getComponent={(location, cb) => {
                 System.import("components/Account/AccountOverview").then(loadRoute(cb)).catch(errorLoading);
             }}/>
-            <Route path="overview" getComponent={(location, cb) => {
+            <Route path="dashboard" getComponent={(location, cb) => {
                 System.import("components/Account/AccountOverview").then(loadRoute(cb)).catch(errorLoading);
             }}/>
             <Route path="assets" getComponent={(location, cb) => {
@@ -194,6 +194,7 @@ const routes = (
             <Route path="whitelist" getComponent={(location, cb) => {
                 System.import("components/Account/AccountWhitelist").then(loadRoute(cb)).catch(errorLoading);
             }}/>
+            <Redirect from="overview" to="dashboard" />
         </Route>
         <Route path="deposit-withdraw" getComponent={(location, cb) => {
             System.import("components/Account/AccountDepositWithdraw").then(loadRoute(cb)).catch(errorLoading);
diff --git a/app/components/Account/AccountLeftPanel.jsx b/app/components/Account/AccountLeftPanel.jsx
index f570904f17..0b7325eb7d 100644
--- a/app/components/Account/AccountLeftPanel.jsx
+++ b/app/components/Account/AccountLeftPanel.jsx
@@ -89,7 +89,7 @@ class AccountLeftPanel extends React.Component {
 						</div>
 						<section className="block-list">
 							<ul className="account-left-menu" style={{marginBottom: 0}}>
-								<li><Link to={`/account/${account_name}/overview/`} activeClassName="active"><Translate content="account.overview"/></Link></li>
+								<li><Link to={`/account/${account_name}/dashboard/`} activeClassName="active"><Translate content="header.dashboard"/></Link></li>
 								<li><Link to={`/account/${account_name}/member-stats/`} activeClassName="active"><Translate content="account.member.stats"/></Link></li>
 								{/* <li><Link to={`/account/${account_name}/orders/`} activeClassName="active"><Translate content="account.open_orders"/></Link></li> */}
 								<li><Link to={`/account/${account_name}/voting/`} activeClassName="active"><Translate content="account.voting"/></Link></li>
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 31699ca070..90ab101a7b 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -488,7 +488,8 @@ class AccountOverview extends React.Component {
             <div className="grid-content" style={{overflowX: "hidden"}}>
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
-                        <Tabs segmented={false} setting="overviewTab" tabsClass="account-overview no-padding bordered-header content-block">
+                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" tabsClass="account-overview no-padding bordered-header content-block">
+
                             <Tab disabled className="total-value" title="account.eq_value" subText={totalBalance}>
 
                             </Tab>
diff --git a/app/components/Account/RecentTransactions.jsx b/app/components/Account/RecentTransactions.jsx
index 7e17c2e50d..52c7143b69 100644
--- a/app/components/Account/RecentTransactions.jsx
+++ b/app/components/Account/RecentTransactions.jsx
@@ -210,9 +210,9 @@ class RecentTransactions extends React.Component {
                         hideOpLabel={compactView}
                     />
                 );
-            }) : [<tr><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>];
+            }) : [<tr key="no_recent"><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>];
         display_history.push(
-            <tr className="total-value">
+            <tr className="total-value" key="total_value">
                 <td style={alignLeft}>
                     {this.props.showFilters ? (
                         <select data-place="left" data-tip={counterpart.translate("tooltip.filter_ops")} style={{paddingTop: 5}} className="bts-select no-margin" value={this.state.filter} onChange={this._onChangeFilter.bind(this)}>{options}</select>

From 0346dba2aa2c174405e5b3f3887837f7f224f5da Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Mon, 2 Oct 2017 11:09:50 +0200
Subject: [PATCH 07/82] Implement feedback from wmbutler

---
 app/assets/locales/locale-en.json             |  8 +--
 .../stylesheets/components/_account.scss      | 43 ++++++++++++-
 .../stylesheets/themes/_dark-theme.scss       |  4 +-
 .../stylesheets/themes/_light-theme.scss      |  4 +-
 .../stylesheets/themes/_ol-dark-theme.scss    |  4 +-
 .../stylesheets/themes/_theme-template.scss   | 10 ++-
 app/components/Account/AccountOverview.jsx    | 64 ++++++++-----------
 app/components/Utility/Tabs.jsx               |  9 +--
 8 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 0258fe0783..43531f938c 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -98,8 +98,8 @@
     "as_collateral": "Collateral",
     "open_orders": "Open orders",
     "total_value": "Total value",
-    "show_hidden": "Show hidden assets",
-    "hide_hidden": "Hide hidden assets",
+    "show_hidden": "Hidden",
+    "hide_hidden": "Active",
     "ignore": "Hide",
     "unignore": "Unhide",
     "show_ignored": "Show hidden accounts",
@@ -246,7 +246,7 @@
       "key_viewer": "Private key viewer",
       "public": "Public key",
       "private": "Private key (WIF - Wallet Import Format)",
-      "show": "show",
+      "show": "Show",
       "brain": "Brainkey position",
       "from": "Imported from account",
       "sign_owner": "Sign as owner",
@@ -345,7 +345,7 @@
       "not_yours": "Not your account"
     },
     "collaterals": "Margin Positions",
-    "eq_value": "Estimated Value",
+    "eq_value": "Estimated %(asset)s",
     "no_price": "Unknown value",
     "percent": "Percent of total supply",
     "please_create_account": "Please create an account",
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index 563292bb53..d73e19a36e 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -108,13 +108,54 @@ a.action-button > span {
     text-transform: lowercase;
 }
 
+div.overview-tabs {
+    > div.service-selector {
+        margin-bottom: 0;
+        border: none;
+    }
+
+    div.hide-selector {
+        padding-bottom: 10px;
+        > div {
+            font-size: 1.15rem;
+            cursor: pointer;
+            &:first-of-type {
+                padding-right: 10px;
+            }
+            &.inactive {
+                color: grey;
+            }
+            &:hover.inactive {
+                color: inherit;
+            }
+        }
+    }
+
+    > div.tab-content {
+        padding: 20px;
+    }
+
+    ul.account-overview > li.total-value > a {
+        span.tab-title {
+            text-transform: uppercase;
+            font-variant: small-caps;
+            font-size: 0.8rem;
+        }
+        div.tab-subtext {
+            font-size: 1rem;
+            text-align: right;
+        }
+    }
+}
 ul.account-overview {
+    width: 100%;
     li {
         > a {
             font-size: 1rem;
 
-            > span.tab-subtext {
+            > div.tab-subtext {
                 font-size: 85%;
+                text-align: right;
             }
         }
         &.total-value {
diff --git a/app/assets/stylesheets/themes/_dark-theme.scss b/app/assets/stylesheets/themes/_dark-theme.scss
index 154053863a..b61b543ea1 100644
--- a/app/assets/stylesheets/themes/_dark-theme.scss
+++ b/app/assets/stylesheets/themes/_dark-theme.scss
@@ -42,6 +42,7 @@ $account-green: #7ED321;
 $account-primarytext: white;
 $account-dimmed: #606060;
 $account-border: #323131;
+$account-background: #3f3f3f;
 
 .darkTheme {
   @include theme(
@@ -75,6 +76,7 @@ $account-border: #323131;
     $account-green,
     $account-primarytext,
     $account-dimmed,
-    $account-border
+    $account-border,
+    $account-background
   );
 }
diff --git a/app/assets/stylesheets/themes/_light-theme.scss b/app/assets/stylesheets/themes/_light-theme.scss
index 249f8aba50..5a5c21bacf 100644
--- a/app/assets/stylesheets/themes/_light-theme.scss
+++ b/app/assets/stylesheets/themes/_light-theme.scss
@@ -43,6 +43,7 @@ $account-green: #7ED321;
 $account-primarytext: white;
 $account-dimmed: #606060;
 $account-border: #323131;
+$account-background: #e5e6e4;
 
 .lightTheme {
   @include theme(
@@ -76,7 +77,8 @@ $account-border: #323131;
     $account-green,
     $account-primarytext,
     $account-dimmed,
-    $account-border
+    $account-border,
+    $account-background
   );
 
   .change-up {
diff --git a/app/assets/stylesheets/themes/_ol-dark-theme.scss b/app/assets/stylesheets/themes/_ol-dark-theme.scss
index 8fca7da7c5..7bf82f95f0 100644
--- a/app/assets/stylesheets/themes/_ol-dark-theme.scss
+++ b/app/assets/stylesheets/themes/_ol-dark-theme.scss
@@ -42,6 +42,7 @@ $account-green: #7ED321;
 $account-primarytext: white;
 $account-dimmed: #606060;
 $account-border: #323131;
+$account-background: black;
 
 .olDarkTheme {
   @include theme(
@@ -75,6 +76,7 @@ $account-border: #323131;
     $account-green,
     $account-primarytext,
     $account-dimmed,
-    $account-border
+    $account-border,
+    $account-background
   );
 }
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index fa442a2429..42aeae5ad8 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -31,7 +31,8 @@
   $account-green,
   $account-primarytext,
   $account-dimmed,
-  $account-border
+  $account-border,
+  $account-background
   ) {
 
   .font-secondary {
@@ -1241,16 +1242,21 @@
     }
 
     /* Table view account */
+    div.overview-tabs {
+        background-color: $account-background;
+    }
     ul.account-overview {
+        background-color: $account-header;
         li {
             > a {
                 color: $account-dimmed;
                 background-color: $account-header;
+                border: none;
                 &:hover {
                     background-color: $account-header;
                     color: $account-primarytext;
                 }
-                > span.tab-subtext {
+                > div.tab-subtext {
                     color: $account-green;
                 }
             }
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 90ab101a7b..389b14005f 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -27,6 +27,7 @@ import { Apis } from "bitsharesjs-ws";
 import GatewayActions from "actions/GatewayActions";
 import {Tabs, Tab} from "../Utility/Tabs";
 import AccountOrders from "./AccountOrders";
+import cnames from "classnames";
 
 class AccountOverview extends React.Component {
 
@@ -248,10 +249,10 @@ class AccountOverview extends React.Component {
                         {directMarketLink}
                     </td>
                     <td>
-                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: symbol})}>{borrowLink}{borrowModal}</div> : null}
+                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.borrow", {asset: symbol})}>{borrowLink}{borrowModal}</div> : emptyCell}
                     </td>
                     <td>
-                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.settle", {asset: symbol})}>{settleLink}</div> : null}
+                        {isBitAsset ? <div className="inline-block" data-place="bottom" data-tip={counterpart.translate("tooltip.settle", {asset: symbol})}>{settleLink}</div> : emptyCell}
                     </td>
                     <td style={{textAlign: "center"}} className="column-hide-small" data-place="bottom" data-tip={counterpart.translate("tooltip." + (includeAsset ? "hide_asset" : "show_asset"))}>
                         <a style={{marginRight: 0}} className={includeAsset ? "order-cancel" : "action-plus"} onClick={this._hideAsset.bind(this, asset_type, includeAsset)}>
@@ -317,7 +318,7 @@ class AccountOverview extends React.Component {
                                     </a>
                                 </span> : emptyCell}
                             </td>
-                            <td></td>
+                            <td>{emptyCell}</td>
                             <td style={{textAlign: "center"}}>
                                 {directMarketLink}
                             </td>
@@ -327,7 +328,7 @@ class AccountOverview extends React.Component {
                                         {borrowLink}{borrowModal}
                                     </div> : emptyCell}
                             </td>
-                            <td></td>
+                            <td>{emptyCell}</td>
                             <td style={{textAlign: "center"}} className="column-hide-small" data-place="bottom" data-tip={counterpart.translate("tooltip." + (includeAsset ? "hide_asset" : "show_asset"))}>
                                 <a style={{marginRight: 0}} className={includeAsset ? "order-cancel" : "action-plus"} onClick={this._hideAsset.bind(this, asset.get("id"), includeAsset)}>
                                     <Icon name={includeAsset ? "cross-circle" : "plus-circle"} className="icon-14px" />
@@ -417,23 +418,19 @@ class AccountOverview extends React.Component {
             hiddenOrders = hidden.openOrders;
         }
 
-        if (hiddenBalances) {
-            hiddenBalances.unshift(<tr style={{backgroundColor: "transparent"}} key="hidden"><td style={{height: 20}} colSpan="11"></td></tr>);
-        }
+        // if (hiddenBalances) {
+        //     hiddenBalances.unshift(<tr style={{backgroundColor: "transparent"}} key="hidden"><td style={{height: 20}} colSpan="11"></td></tr>);
+        // }
 
         let totalBalanceList = includedBalancesList.concat(hiddenBalancesList);
-        let totalBalance =
+        let totalBalanceNoSymbol =
             <TotalBalanceValue
                 noTip
                 balances={totalBalanceList}
                 openOrders={orders}
                 debt={debt}
                 collateral={collateral}
-            />;
-        let portFolioBalance =
-            <TotalBalanceValue
-                noTip
-                balances={totalBalanceList}
+                hide_asset
             />;
         let portFolioBalanceNoSymbol =
             <TotalBalanceValue
@@ -441,12 +438,6 @@ class AccountOverview extends React.Component {
                 balances={totalBalanceList}
                 hide_asset
             />;
-        let ordersBalance =
-            <TotalBalanceValue
-                noTip
-                balances={Immutable.List()}
-                openOrders={orders}
-            />;
         let ordersBalanceNoSymbol =
             <TotalBalanceValue
                 noTip
@@ -454,12 +445,13 @@ class AccountOverview extends React.Component {
                 openOrders={orders}
                 hide_asset
             />;
-        let collateralBalance =
+        let collateralBalanceNoSymbol =
             <TotalBalanceValue
                 noTip
                 balances={Immutable.List()}
                 debt={debt}
                 collateral={collateral}
+                hide_asset
             />;
 
         includedBalances.push(<tr key="portfolio" className="total-value"><td><Translate content="account.portfolio" /></td><td></td><td style={{textAlign: "right"}}>{portFolioBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
@@ -488,13 +480,22 @@ class AccountOverview extends React.Component {
             <div className="grid-content" style={{overflowX: "hidden"}}>
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
-                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" tabsClass="account-overview no-padding bordered-header content-block">
+                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">
 
-                            <Tab disabled className="total-value" title="account.eq_value" subText={totalBalance}>
+                            <Tab disabled className="total-value" title={counterpart.translate("account.eq_value", {asset: assetName})} subText={totalBalanceNoSymbol}>
 
                             </Tab>
 
-                            <Tab title="account.portfolio" subText={portFolioBalance}>
+                            <Tab title="account.portfolio" subText={portFolioBalanceNoSymbol}>
+                                <div className="hide-selector">
+                                    <div className={cnames("inline-block", {inactive: showHidden})} onClick={showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
+                                        <Translate content="account.hide_hidden" />
+                                    </div>
+                                    <div className={cnames("inline-block", {inactive: !showHidden})} onClick={!showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
+                                        <Translate content="account.show_hidden" />
+                                    </div>
+                                </div>
+
                                 <table className="table dashboard-table">
                                     <thead>
                                         <tr>
@@ -513,25 +514,16 @@ class AccountOverview extends React.Component {
                                             <th><Translate content="account.trade" /></th>
                                             <th><Translate content="exchange.borrow" /></th>
                                             <th><Translate content="account.settle" /></th>
-                                            <th>{/* Hide/show asset column */}</th>
+                                            <th><Translate content={!showHidden ? "exchange.hide" : "account.perm.show"} /></th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {includedBalances}
-                                        {showHidden ? hiddenBalances : null}
+                                        {showHidden ? hiddenBalances : includedBalances}
                                     </tbody>
                                 </table>
-
-                                {hiddenBalances && hiddenBalances.length - 1 > 0 ? <div
-                                    className="button outline small column-hide-small no-margin"
-                                    style={{position: "relative", top: 10}}
-                                    onClick={this._toggleHiddenAssets.bind(this)}
-                                >
-                                    <Translate content={`account.${showHidden ? "hide_hidden" : "show_hidden"}`} /><span> ({hiddenBalances.reduce((count, a) => {if (a.key.indexOf("hidden") === -1) return count + 1; return count;}, 0)})</span>
-                                </div> : null}
                             </Tab>
 
-                            <Tab title="account.open_orders" subText={ordersBalance}>
+                            <Tab title="account.open_orders" subText={ordersBalanceNoSymbol}>
                                 <AccountOrders {...this.props}>
                                     <tbody>
                                         <tr className="total-value">
@@ -544,7 +536,7 @@ class AccountOverview extends React.Component {
                                 </AccountOrders>
                             </Tab>
 
-                            <Tab title="account.collaterals" subText={collateralBalance}>
+                            <Tab title="account.collaterals" subText={collateralBalanceNoSymbol}>
                                 {call_orders.length > 0 ? (
 
                                 <div className="content-block">
diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
index 2bbe5c9272..6c13d0718f 100644
--- a/app/components/Utility/Tabs.jsx
+++ b/app/components/Utility/Tabs.jsx
@@ -45,8 +45,8 @@ class Tab extends React.Component {
         return (
             <li className={c} onClick={!disabled ? changeTab.bind(this, index) : null}>
                 <a>
-                    {title.indexOf(".") > 0 ? <Translate className="tab-title" content={title} /> : title}
-                    {this.props.subText ? <span className="tab-subtext"><br />{this.props.subText}</span> : null}
+                    {title.indexOf(".") > 0 ? <Translate className="tab-title" content={title} /> : <span className="tab-title">{title}</span>}
+                    {this.props.subText ? <div className="tab-subtext">{this.props.subText}</div> : null}
                 </a>
             </li>
         );
@@ -64,7 +64,8 @@ class Tabs extends React.Component {
     static defaultProps = {
         active: 0,
         defaultActiveTab: 0,
-        segmented: true
+        segmented: true,
+        contentClass: ""
     };
 
     constructor(props) {
@@ -127,7 +128,7 @@ class Tabs extends React.Component {
                         {tabs}
                     </ul>
                 </div>
-                <div className={contentClass} >
+                <div className={contentClass + " tab-content"} >
                     {activeContent}
                 </div>
 

From 651b1ed2a02e6a80b0455c76f1e27e7e9d5e5c81 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Mon, 2 Oct 2017 11:25:46 +0200
Subject: [PATCH 08/82] Bugfixes

---
 app/components/Account/AccountOverview.jsx   | 2 +-
 app/components/Utility/FormattedAsset.jsx    | 5 ++---
 app/components/Utility/TotalBalanceValue.jsx | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 389b14005f..f22f309f74 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -472,7 +472,7 @@ class AccountOverview extends React.Component {
         let assetName = !!preferredAsset ? preferredAsset.get("symbol") : "";
         if (preferredAsset) {
             const {prefix, name} = utils.replaceName(assetName, !!preferredAsset.get("bitasset_data_id"));
-            assetName = prefix + name;
+            assetName = (prefix || "") + name;
         }
         const hiddenSubText = <span style={{visibility: "hidden"}}>H</span>;
 
diff --git a/app/components/Utility/FormattedAsset.jsx b/app/components/Utility/FormattedAsset.jsx
index b022e3dc56..3fa33e5044 100755
--- a/app/components/Utility/FormattedAsset.jsx
+++ b/app/components/Utility/FormattedAsset.jsx
@@ -69,7 +69,6 @@ class FormattedAsset extends React.Component {
         let precision = utils.get_asset_precision(asset.precision);
 
         let decimals = Math.max(0, asset.precision - decimalOffset);
-
         if (hide_amount) {
             colorClass += " no-amount";
         }
@@ -106,8 +105,8 @@ class FormattedAsset extends React.Component {
                 {!hide_amount ?
                     <FormattedNumber
                         value={this.props.exact_amount ? amount : amount / precision}
-                        minimumFractionDigits={0}
-                        maximumFractionDigits={decimals}
+                        minimumFractionDigits={2}
+                        maximumFractionDigits={Math.max(decimals, 2)}
                     />
                 : null}
                 {!hide_asset && (this.props.assetInfo ? (
diff --git a/app/components/Utility/TotalBalanceValue.jsx b/app/components/Utility/TotalBalanceValue.jsx
index b92708bb9e..50d517bd5f 100644
--- a/app/components/Utility/TotalBalanceValue.jsx
+++ b/app/components/Utility/TotalBalanceValue.jsx
@@ -252,14 +252,14 @@ class TotalValue extends React.Component {
             return(
                 <span>
                     {!!this.props.label ? (<span className="font-secondary"><Translate content={this.props.label} />: </span>) : null}
-                    <FormattedAsset noTip={this.props.noTip} noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
+                    <FormattedAsset noTip={this.props.noTip} noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? (toAsset.get("precision") - 2) : 4}/>
                 </span>
             );
         } else {
             return (
                 <div className="tooltip inline-block" data-tip={totalsTip} data-place="bottom" data-html={true} >
                     {!!this.props.label ? (<span className="font-secondary"><Translate content={this.props.label} />: </span>) : null}
-                    <FormattedAsset noTip noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? toAsset.get("precision") : 4}/>
+                    <FormattedAsset noTip noPrefix hide_asset={this.props.hide_asset} amount={totalValue} asset={toAsset.get("id")} decimalOffset={toAsset.get("symbol").indexOf("BTC") === -1 ? (toAsset.get("precision") - 2) : 4}/>
                 </div>
             );
         }

From 05f3e75bbeb3cb6d5c2320c1d39b05ab57c7508c Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Mon, 2 Oct 2017 11:26:16 +0200
Subject: [PATCH 09/82] Remove the markets tab

---
 app/components/Account/AccountOverview.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index f22f309f74..809ce0f671 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -546,9 +546,9 @@ class AccountOverview extends React.Component {
                                 </div>) : null}
                             </Tab>
 
-                            <Tab title="markets.title" subText={hiddenSubText}>
+                            {/* <Tab title="markets.title" subText={hiddenSubText}>
 
-                            </Tab>
+                            </Tab> */}
 
                             <Tab title="account.activity" subText={hiddenSubText}>
                                 <RecentTransactions

From 437034cda11430894e862b55794fe04722d2cd62 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 3 Oct 2017 11:46:51 +0200
Subject: [PATCH 10/82] Partial progress on open orders

---
 app/components/Account/AccountOrders.jsx   | 42 ++++++++++++++++------
 app/components/Account/AccountOverview.jsx |  5 +--
 app/components/Blockchain/Operation.jsx    |  2 +-
 app/components/Exchange/MyOpenOrders.jsx   | 24 ++++++++-----
 app/components/Utility/FormattedPrice.jsx  | 35 +++++++++++++++---
 app/lib/common/market_utils.js             |  8 +++++
 6 files changed, 89 insertions(+), 27 deletions(-)

diff --git a/app/components/Account/AccountOrders.jsx b/app/components/Account/AccountOrders.jsx
index 5061de2468..470e9aa165 100644
--- a/app/components/Account/AccountOrders.jsx
+++ b/app/components/Account/AccountOrders.jsx
@@ -1,10 +1,13 @@
 import React from "react";
 import {OrderRow, TableHeader} from "../Exchange/MyOpenOrders";
-import market_utils from "common/market_utils";
 import counterpart from "counterpart";
 import MarketsActions from "actions/MarketsActions";
 import {ChainStore} from "bitsharesjs/es";
 import { LimitOrder } from "common/MarketClasses";
+import {connect} from "alt-react";
+import SettingsStore from "stores/SettingsStore";
+import SettingsActions from "actions/SettingsActions";
+import marketUtils from "common/market_utils";
 
 class AccountOrders extends React.Component {
 
@@ -19,8 +22,14 @@ class AccountOrders extends React.Component {
         });
     }
 
+    onFlip(marketId) {
+        let setting = {};
+        setting[marketId] = !this.props.marketDirections.get(marketId);
+        SettingsActions.changeMarketDirection(setting);
+    }
+
     render() {
-        let {account} = this.props;
+        let {account, marketDirections} = this.props;
         let cancel = counterpart.translate("account.perm.cancel");
         let markets = {};
 
@@ -39,15 +48,16 @@ class AccountOrders extends React.Component {
                     [base.get("id")]: {precision: base.get("precision")},
                     [quote.get("id")]: {precision: quote.get("precision")}
                 };
-                let baseID = parseInt(order.sell_price.base.asset_id.split(".")[2], 10);
-                let quoteID = parseInt(order.sell_price.quote.asset_id.split(".")[2], 10);
+                // let baseID = parseInt(order.sell_price.base.asset_id.split(".")[2], 10);
+                // let quoteID = parseInt(order.sell_price.quote.asset_id.split(".")[2], 10);
 
-                let limitOrder = new LimitOrder(order, assets, quoteID > baseID ? quote.get("id") : base.get("id"));
 
-                let marketID = quoteID > baseID ? `${quote.get("symbol")}_${base.get("symbol")}` : `${base.get("symbol")}_${quote.get("symbol")}`;
+                // let marketID = quoteID > baseID ? `${quote.get("symbol")}_${base.get("symbol")}` : `${base.get("symbol")}_${quote.get("symbol")}`;
+                const {marketID, baseID, quoteID} = marketUtils.getMarketID(this.props.marketDirections, base, quote);
+                const direction = marketDirections.get(marketID);
 
                 if (!markets[marketID]) {
-                    if (quoteID > baseID) {
+                    if (direction) {
                         markets[marketID] = {
                             base: {id: base.get("id"), symbol: base.get("symbol"), precision: base.get("precision")},
                             quote: {id: quote.get("id"), symbol: quote.get("symbol"), precision: quote.get("precision")}
@@ -59,7 +69,8 @@ class AccountOrders extends React.Component {
                         };
                     }
                 }
-
+                let limitOrder = new LimitOrder(order, assets, markets[marketID].quote.id);
+                console.log("marketID", marketID, "direction", direction, limitOrder.market_base, "isBid", limitOrder.isBid())
 
                 let marketBase = ChainStore.getAsset(markets[marketID].base.id);
                 let marketQuote = ChainStore.getAsset(markets[marketID].quote.id);
@@ -68,7 +79,6 @@ class AccountOrders extends React.Component {
                     marketOrders[marketID] = [];
                 }
 
-                let {price} = market_utils.parseOrder(order, marketBase, marketQuote);
                 marketOrders[marketID].push(
                     <OrderRow
                         ref={markets[marketID].base.symbol}
@@ -80,10 +90,11 @@ class AccountOrders extends React.Component {
                         showSymbols={false}
                         invert={true}
                         onCancel={this._cancelLimitOrder.bind(this, order.id)}
-                        price={price.full}
+                        price={limitOrder.getPrice()}
                         dashboard
                         isMyAccount={this.props.isMyAccount}
                         settings={this.props.settings}
+                        onFlip={this.onFlip.bind(this, marketID)}
                     />
                 );
             }
@@ -118,4 +129,15 @@ class AccountOrders extends React.Component {
     }
 }
 
+AccountOrders = connect(AccountOrders, {
+    listenTo() {
+        return [SettingsStore];
+    },
+    getProps() {
+        return {
+            marketDirections: SettingsStore.getState().marketDirections
+        };
+    }
+});
+
 export default AccountOrders;
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 809ce0f671..cf5ad34a83 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -527,9 +527,10 @@ class AccountOverview extends React.Component {
                                 <AccountOrders {...this.props}>
                                     <tbody>
                                         <tr className="total-value">
-                                            <td colSpan="2">Open orders</td>
-                                            <td colSpan="3"></td>
+                                            <td colSpan="2"><Translate content="account.open_orders" /></td>
+                                            <td colSpan="2"></td>
                                             <td style={{textAlign: "center"}}>{ordersBalanceNoSymbol}</td>
+                                            <td></td>
                                             {this.props.isMyAccount ? <td></td> : null}
                                         </tr>
                                     </tbody>
diff --git a/app/components/Blockchain/Operation.jsx b/app/components/Blockchain/Operation.jsx
index 20f9f74e2f..517ac2b834 100644
--- a/app/components/Blockchain/Operation.jsx
+++ b/app/components/Blockchain/Operation.jsx
@@ -182,7 +182,7 @@ class Operation extends React.Component {
                 color = "warning";
                 let o = op[1];
                 let isAsk = market_utils.isAskOp(op[1]);
-
+                console.log("order", o, "isAsk", isAsk);
                 column = (
                         <span>
                             <TranslateWithLinks
diff --git a/app/components/Exchange/MyOpenOrders.jsx b/app/components/Exchange/MyOpenOrders.jsx
index e3c86adfd0..2d2fdbb113 100644
--- a/app/components/Exchange/MyOpenOrders.jsx
+++ b/app/components/Exchange/MyOpenOrders.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import {PropTypes} from "react";
+import { Link } from "react-router";
 import {FormattedDate} from "react-intl";
 import Ps from "perfect-scrollbar";
 import utils from "common/utils";
@@ -33,12 +34,12 @@ class TableHeader extends React.Component {
         ) : (
             <thead>
                 <tr>
-                    <th style={leftAlign}>Asset 1</th>
-                    <th style={leftAlign}>Asset 2</th>
-                    <th style={rightAlign}>Qty</th>
-                    <th style={rightAlign}>Total</th>
+                    <th style={leftAlign}>Market</th>
                     <th style={rightAlign}><Translate content="exchange.price" /></th>
+                    <th style={rightAlign}><Translate content="account.qty" /></th>
+                    <th style={rightAlign}>Total</th>
                     <th>Order Value (<AssetName name={preferredUnit} />)</th>
+                    <th><Translate content="account.trade" /></th>
                     {/* <th><Translate content="transaction.expiration" /></th> */}
                     {isMyAccount ? <th><Translate content="wallet.cancel" /></th> : null}
                 </tr>
@@ -59,7 +60,8 @@ class OrderRow extends React.Component {
             nextProps.order.for_sale !== this.props.order.for_sale ||
             nextProps.order.id !== this.props.order.id ||
             nextProps.quote !== this.props.quote ||
-            nextProps.base !== this.props.base
+            nextProps.base !== this.props.base ||
+            nextProps.order.market_base !== this.props.order.market_base
         );
     }
 
@@ -96,14 +98,17 @@ class OrderRow extends React.Component {
             </tr>
         ) : (
             <tr key={order.id}>
-                <td style={leftAlign}><AssetName name={quote.get("symbol")} /></td>
-                <td style={leftAlign}><AssetName name={base.get("symbol")} /></td>
-                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountForSale" : "amountToReceive"]().getAmount({real: true}), quote.get("precision"))} {amountSymbol}</td>
-                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountToReceive" : "amountForSale"]().getAmount({real: true}), base.get("precision"))} {valueSymbol}</td>
+                <td style={leftAlign}>
+                    <Link to={`/asset/${quote.get("symbol")}`}><AssetName noTip name={quote.get("symbol")} /></Link>
+                    <a onClick={this.props.onFlip}>&nbsp;<Icon className="shuffle" name="shuffle"/>&nbsp;</a>
+                    <Link to={`/asset/${base.get("symbol")}`}><AssetName noTip name={base.get("symbol")} /></Link>
+                </td>
                 <td className={tdClass} style={rightAlign}>
                     <PriceText price={order.getPrice()} base={base} quote={quote} />
                     {priceSymbol}
                 </td>
+                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountForSale" : "amountToReceive"]().getAmount({real: true}), quote.get("precision"))} {amountSymbol}</td>
+                <td style={rightAlign}>{utils.format_number(order[!isBid ? "amountToReceive" : "amountForSale"]().getAmount({real: true}), base.get("precision"))} {valueSymbol}</td>
                 <td>
                     <EquivalentValueComponent hide_asset amount={order.amountForSale().getAmount()} fromAsset={order.amountForSale().asset_id} noDecimals={true} toAsset={preferredUnit}/>
                 </td>
@@ -113,6 +118,7 @@ class OrderRow extends React.Component {
                         format="short"
                     />}
                 </td> */}
+                <td><Link to={`/market/${quote.get("symbol")}_${base.get("symbol")}`}><Icon name="trade" className="icon-14px" /></Link></td>
                 {isMyAccount ? <td className="text-center" style={{ padding: "2px 5px"}}>
                     {isCall ? null : <a style={{marginRight: 0}} className="order-cancel" onClick={this.props.onCancel}>
                         <Icon name="cross-circle" className="icon-14px" />
diff --git a/app/components/Utility/FormattedPrice.jsx b/app/components/Utility/FormattedPrice.jsx
index 80a4069a07..5b021b86ec 100644
--- a/app/components/Utility/FormattedPrice.jsx
+++ b/app/components/Utility/FormattedPrice.jsx
@@ -9,6 +9,8 @@ import SettingsActions from "actions/SettingsActions";
 import Popover from "react-popover";
 import Translate from "react-translate-component";
 import AssetName from "./AssetName";
+import marketUtils from "common/market_utils";
+import { Asset, Price } from "common/MarketClasses";
 
 /**
  *  Given an amount and an asset, render it with proper precision
@@ -37,11 +39,21 @@ class FormattedPrice extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = {isPopoverOpen: false};
+        const {marketID} = marketUtils.getMarketID(this.props.marketDirections, this.props.base_asset, this.props.quote_asset);
+
+        this.state = {isPopoverOpen: false, marketId: marketID};
         this.togglePopover = this.togglePopover.bind(this);
         this.closePopover = this.closePopover.bind(this);
     }
 
+    componentWillReceiveProps(np) {
+        if (np.base_asset !== this.props.base_asset ||
+            np.quote_asset !== this.props.quote_asset) {
+            const {marketID} = marketUtils.getMarketID(np.marketDirections, np.base_asset, np.quote_asset);
+            this.setState({marketId: marketID});
+        }
+    }
+
     togglePopover(e) {
         e.preventDefault();
         this.setState({isPopoverOpen: !this.state.isPopoverOpen});
@@ -53,7 +65,8 @@ class FormattedPrice extends React.Component {
 
     onFlip() {
         let setting = {};
-        setting[this.props.marketId] = !this.props.marketDirections.get(this.props.marketId);
+
+        setting[this.state.marketId] = !this.props.marketDirections.get(this.state.marketId);
         SettingsActions.changeMarketDirection(setting);
     }
 
@@ -75,9 +88,21 @@ class FormattedPrice extends React.Component {
     render() {
 
         let {base_asset, quote_asset, base_amount, quote_amount,
-          marketDirections, marketId, hide_symbols, noPopOver} = this.props;
-
-        let invertPrice = marketDirections.get(marketId);
+          marketDirections, hide_symbols, noPopOver} = this.props;
+        let invertPrice = marketDirections.get(this.state.marketId);
+        const price = new Price({
+            base: new Asset({
+                asset_id: this.props.base_asset.get("id"),
+                precision: this.props.base_asset.get("precision"),
+                amount: base_amount
+            }),
+            quote: new Asset({
+                asset_id: this.props.quote_asset.get("id"),
+                precision: this.props.quote_asset.get("precision"),
+                amount: quote_amount
+            })
+        });
+        console.log("marketId", this.state.marketId, "invertPrice", invertPrice, price.toReal());
         if( (invertPrice) || this.props.invert) {
             let tmp = base_asset;
             base_asset = quote_asset;
diff --git a/app/lib/common/market_utils.js b/app/lib/common/market_utils.js
index 1f3bebce8c..be6387a28e 100644
--- a/app/lib/common/market_utils.js
+++ b/app/lib/common/market_utils.js
@@ -349,6 +349,14 @@ const MarketUtils = {
             marketAsset,
             inverted
         };
+    },
+
+    getMarketID(directions, base, quote) {
+        let baseID = parseInt(base.get("id").split(".")[2], 10);
+        let quoteID = parseInt(quote.get("id").split(".")[2], 10);
+        const marketID = quoteID > baseID ? `${quote.get("symbol")}_${base.get("symbol")}` : `${base.get("symbol")}_${quote.get("symbol")}`;
+
+        return {baseID, quoteID, marketID};
     }
 };
 

From a3a35793a60808e8b43ba7f6e6b1234ec976929a Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 3 Oct 2017 16:50:46 +0200
Subject: [PATCH 11/82] Refactor price directions

---
 app/App.jsx                                   |   3 +-
 app/assets/locales/locale-en.json             |   3 +-
 app/components/Account/AccountOrders.jsx      |   2 +-
 app/components/Blockchain/Operation.jsx       | 131 +++++++++++++++---
 app/components/Exchange/Exchange.jsx          |  10 +-
 app/components/Exchange/ExchangeContainer.jsx |   3 +
 app/components/Utility/FormattedPrice.jsx     |  64 +++++----
 app/lib/common/market_utils.js                |   5 +-
 app/stores/SettingsStore.js                   |   4 +-
 9 files changed, 168 insertions(+), 57 deletions(-)

diff --git a/app/App.jsx b/app/App.jsx
index f3b26c7397..59b72b3add 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -48,6 +48,7 @@ class App extends React.Component {
         };
 
         this._rebuildTooltips = this._rebuildTooltips.bind(this);
+        this._onSettingsChange = this._onSettingsChange.bind(this);
     }
 
     componentWillUnmount() {
@@ -62,7 +63,7 @@ class App extends React.Component {
             }.bind(this));
 
             NotificationStore.listen(this._onNotificationChange.bind(this));
-            SettingsStore.listen(this._onSettingsChange.bind(this));
+            SettingsStore.listen(this._onSettingsChange);
 
             ChainStore.init().then(() => {
                 this.setState({synced: true});
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 43531f938c..b2eecca274 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -414,7 +414,8 @@
     "proposal_create": "{account} created a proposed transaction",
     "proposal_update": "{account} updated a proposed transaction",
     "proposal_delete": "{account} deleted a proposed transaction",
-    "fill_order": "{account} bought {received} at {price}",
+    "fill_order_buy": "{account} bought {amount} at {price}",
+    "fill_order_sell": "{account} sold {amount} at {price}",
     "vesting_balance_withdraw": "{account} withdrew vesting balance of {amount}",
     "balance_claim": "{account} claimed a balance of {amount}",
     "publish_feed": "{account} published feed price of {price}",
diff --git a/app/components/Account/AccountOrders.jsx b/app/components/Account/AccountOrders.jsx
index 470e9aa165..e495f972e6 100644
--- a/app/components/Account/AccountOrders.jsx
+++ b/app/components/Account/AccountOrders.jsx
@@ -53,7 +53,7 @@ class AccountOrders extends React.Component {
 
 
                 // let marketID = quoteID > baseID ? `${quote.get("symbol")}_${base.get("symbol")}` : `${base.get("symbol")}_${quote.get("symbol")}`;
-                const {marketID, baseID, quoteID} = marketUtils.getMarketID(this.props.marketDirections, base, quote);
+                const {marketID} = marketUtils.getMarketID(base, quote);
                 const direction = marketDirections.get(marketID);
 
                 if (!markets[marketID]) {
diff --git a/app/components/Blockchain/Operation.jsx b/app/components/Blockchain/Operation.jsx
index 517ac2b834..7973050970 100644
--- a/app/components/Blockchain/Operation.jsx
+++ b/app/components/Blockchain/Operation.jsx
@@ -4,7 +4,6 @@ import {Link} from "react-router/es";
 import classNames from "classnames";
 import Translate from "react-translate-component";
 import counterpart from "counterpart";
-import market_utils from "common/market_utils";
 import utils from "common/utils";
 import BlockTime from "./BlockTime";
 import LinkToAccountById from "../Blockchain/LinkToAccountById";
@@ -16,6 +15,9 @@ import {ChainStore, ChainTypes as grapheneChainTypes} from "bitsharesjs/es";
 import account_constants from "chain/account_constants";
 import MemoText from "./MemoText";
 import ProposedOperation from "./ProposedOperation";
+import marketUtils from "common/market_utils";
+import {connect} from "alt-react";
+import SettingsStore from "stores/SettingsStore";
 
 const {operations} = grapheneChainTypes;
 require("./operations.scss");
@@ -125,6 +127,12 @@ class Operation extends React.Component {
         csvExportMode: React.PropTypes.bool
     };
 
+    componentWillReceiveProps(np) {
+        if (np.marketDirections !== this.props.marketDirections) {
+            this.forceUpdate();
+        }
+    }
+
     linkToAccount(name_or_id) {
         if(!name_or_id) return <span>-</span>;
         return utils.is_object_id(name_or_id) ?
@@ -143,7 +151,8 @@ class Operation extends React.Component {
         if (!this.props.op || !nextProps.op) {
             return false;
         }
-        return !utils.are_equal_shallow(nextProps.op[1], this.props.op[1]);
+        return !utils.are_equal_shallow(nextProps.op[1], this.props.op[1]) ||
+            nextProps.marketDirections !== this.props.marketDirections;
     }
 
     render() {
@@ -181,18 +190,45 @@ class Operation extends React.Component {
             case "limit_order_create":
                 color = "warning";
                 let o = op[1];
-                let isAsk = market_utils.isAskOp(op[1]);
-                console.log("order", o, "isAsk", isAsk);
+                /*
+                marketID = OPEN.ETH_USD
+                if (!inverted) (default)
+                    price = USD / OPEN.ETH
+                    buy / sell OPEN.ETH
+                    isBid = amount_to_sell.asset_symbol = USD
+                    amount = to_receive
+                if (inverted)
+                    price =  OPEN.ETH / USD
+                    buy / sell USD
+                    isBid = amount_to_sell.asset_symbol = OPEN.ETH
+                    amount =
+                */
                 column = (
                         <span>
-                            <TranslateWithLinks
-                                string={isAsk ? "operation.limit_order_sell" : "operation.limit_order_buy"}
-                                keys={[
-                                    {type: "account", value: op[1].seller, arg: "account"},
-                                    {type: "amount", value: isAsk ? op[1].amount_to_sell : op[1].min_to_receive, arg: "amount"},
-                                    {type: "price", value: {base: isAsk ? op[1].min_to_receive : op[1].amount_to_sell, quote: isAsk ? op[1].amount_to_sell : op[1].min_to_receive}, arg: "price"}
-                                ]}
-                            />
+                            <BindToChainState.Wrapper base={o.min_to_receive.asset_id} quote={o.amount_to_sell.asset_id}>
+                                { ({base, quote}) => {
+                                    const {marketID, first, second} = marketUtils.getMarketID(base, quote);
+                                    const inverted = this.props.marketDirections.get(marketID);
+                                    // const paySymbol = base.get("symbol");
+                                    // const receiveSymbol = quote.get("symbol");
+
+                                    const isBid = o.amount_to_sell.asset_id === (inverted ? first.get("id") : second.get("id"));
+
+                                    let priceBase = (isBid) ? o.amount_to_sell : o.min_to_receive;
+                                    let priceQuote = (isBid) ? o.min_to_receive : o.amount_to_sell;
+                                    const amount = isBid ? op[1].min_to_receive : op[1].amount_to_sell;
+
+                                    return <TranslateWithLinks
+                                        string={isBid ? "operation.limit_order_buy" : "operation.limit_order_sell"}
+                                        keys={[
+                                            {type: "account", value: op[1].seller, arg: "account"},
+                                            {type: "amount", value: amount, arg: "amount"},
+                                            {type: "price", value: {base: priceBase, quote: priceQuote}, arg: "price"}
+                                        ]}
+                                    />;
+                                }}
+                            </BindToChainState.Wrapper>
+
                         </span>
                 );
                 break;
@@ -596,17 +632,58 @@ class Operation extends React.Component {
                 color = "success";
                 o = op[1];
 
-                let receivedAmount = o.fee.asset_id === o.receives.asset_id ? o.receives.amount - o.fee.amount : o.receives.amount;
+                /*
+                marketID = OPEN.ETH_USD
+                if (!inverted) (default)
+                    price = USD / OPEN.ETH
+                    buy / sell OPEN.ETH
+                    isBid = amount_to_sell.asset_symbol = USD
+                    amount = to_receive
+                if (inverted)
+                    price =  OPEN.ETH / USD
+                    buy / sell USD
+                    isBid = amount_to_sell.asset_symbol = OPEN.ETH
+                    amount =
+
+                    const {marketID, first, second} = marketUtils.getMarketID(base, quote);
+                    const inverted = this.props.marketDirections.get(marketID);
+                    // const paySymbol = base.get("symbol");
+                    // const receiveSymbol = quote.get("symbol");
+
+                    const isBid = o.amount_to_sell.asset_id === (inverted ? first.get("id") : second.get("id"));
+
+                    let priceBase = (isBid) ? o.amount_to_sell : o.min_to_receive;
+                    let priceQuote = (isBid) ? o.min_to_receive : o.amount_to_sell;
+                    const amount = isBid ? op[1].min_to_receive : op[1].amount_to_sell;
+                */
+
                 column = (
                         <span>
-                            <TranslateWithLinks
-                                string="operation.fill_order"
-                                keys={[
-                                    {type: "account", value: op[1].account_id, arg: "account"},
-                                    {type: "amount", value: {amount: receivedAmount, asset_id: op[1].receives.asset_id}, arg: "received", decimalOffset: op[1].receives.asset_id === "1.3.0" ? 3 : null},
-                                    {type: "price", value: {base: o.pays, quote: o.receives}, arg: "price"}
-                                ]}
-                            />
+                            <BindToChainState.Wrapper base={o.receives.asset_id} quote={o.pays.asset_id}>
+                                { ({base, quote}) => {
+
+                                    const {marketID, first, second} = marketUtils.getMarketID(base, quote);
+                                    const inverted = this.props.marketDirections.get(marketID);
+                                    const isBid = o.pays.asset_id === (inverted ? first.get("id") : second.get("id"));
+
+
+                                    // const paySymbol = base.get("symbol");
+                                    // const receiveSymbol = quote.get("symbol");
+                                    let priceBase = (isBid) ? o.receives : o.pays;
+                                    let priceQuote = (isBid) ? o.pays : o.receives;
+                                    let amount = isBid ? o.receives : o.pays;
+                                    let receivedAmount = o.fee.asset_id === amount.asset_id ? amount.amount - o.fee.amount : amount.amount;
+
+                                    return <TranslateWithLinks
+                                        string={`operation.fill_order_${isBid ? "buy" : "sell"}`}
+                                        keys={[
+                                            {type: "account", value: op[1].account_id, arg: "account"},
+                                            {type: "amount", value: {amount: receivedAmount, asset_id: amount.asset_id}, arg: "amount", decimalOffset: op[1].receives.asset_id === "1.3.0" ? 3 : null},
+                                            {type: "price", value: {base: priceBase, quote: priceQuote}, arg: "price"}
+                                        ]}
+                                    />;
+                                }}
+                        </BindToChainState.Wrapper>
                         </span>
                 );
                 break;
@@ -823,4 +900,16 @@ class Operation extends React.Component {
     }
 }
 
+
+Operation = connect(Operation, {
+    listenTo() {
+        return [SettingsStore];
+    },
+    getProps() {
+        return {
+            marketDirections: SettingsStore.getState().marketDirections
+        };
+    }
+});
+
 export default Operation;
diff --git a/app/components/Exchange/Exchange.jsx b/app/components/Exchange/Exchange.jsx
index e5ff08a1fe..dfa61e7f53 100644
--- a/app/components/Exchange/Exchange.jsx
+++ b/app/components/Exchange/Exchange.jsx
@@ -395,7 +395,15 @@ class Exchange extends React.Component {
                 amount: 0
             }
         });
-
+        const {marketID, first} = market_utils.getMarketID(this.props.baseAsset, this.props.quoteAsset);
+        const inverted = this.props.marketDirections.get(marketID);
+        const shouldFlip = inverted && first.get("id") !== this.props.baseAsset.get("id") ||
+            !inverted && first.get("id") !== this.props.baseAsset.get("id");
+        if (shouldFlip) {
+            let setting = {};
+            setting[marketID] = !inverted;
+            SettingsActions.changeMarketDirection(setting);
+        }
         console.log("order:", JSON.stringify(order.toObject()));
         return MarketsActions.createLimitOrder2(order).then((result) => {
             if (result.error) {
diff --git a/app/components/Exchange/ExchangeContainer.jsx b/app/components/Exchange/ExchangeContainer.jsx
index c278b1bf3a..746fb89c2c 100644
--- a/app/components/Exchange/ExchangeContainer.jsx
+++ b/app/components/Exchange/ExchangeContainer.jsx
@@ -74,6 +74,9 @@ class ExchangeContainer extends React.Component {
                         starredMarkets: () => {
                             return SettingsStore.getState().starredMarkets;
                         },
+                        marketDirections: () => {
+                            return SettingsStore.getState().marketDirections;
+                        },
                         marketStats: () => {
                             return MarketsStore.getState().marketStats;
                         },
diff --git a/app/components/Utility/FormattedPrice.jsx b/app/components/Utility/FormattedPrice.jsx
index 5b021b86ec..4b011d5e25 100644
--- a/app/components/Utility/FormattedPrice.jsx
+++ b/app/components/Utility/FormattedPrice.jsx
@@ -39,9 +39,9 @@ class FormattedPrice extends React.Component {
 
     constructor(props) {
         super(props);
-        const {marketID} = marketUtils.getMarketID(this.props.marketDirections, this.props.base_asset, this.props.quote_asset);
+        const {marketID, first, second} = marketUtils.getMarketID(this.props.base_asset, this.props.quote_asset);
 
-        this.state = {isPopoverOpen: false, marketId: marketID};
+        this.state = {isPopoverOpen: false, marketId: marketID, first, second};
         this.togglePopover = this.togglePopover.bind(this);
         this.closePopover = this.closePopover.bind(this);
     }
@@ -49,8 +49,8 @@ class FormattedPrice extends React.Component {
     componentWillReceiveProps(np) {
         if (np.base_asset !== this.props.base_asset ||
             np.quote_asset !== this.props.quote_asset) {
-            const {marketID} = marketUtils.getMarketID(np.marketDirections, np.base_asset, np.quote_asset);
-            this.setState({marketId: marketID});
+            const {marketID, first, second} = marketUtils.getMarketID(np.base_asset, np.quote_asset);
+            this.setState({marketId: marketID, first, second});
         }
     }
 
@@ -82,41 +82,47 @@ class FormattedPrice extends React.Component {
 
     goToMarket(e) {
         e.preventDefault();
-        this.context.router.push(`/market/${this.props.base_asset.get("symbol")}_${this.props.quote_asset.get("symbol")}`);
+        const { marketId, first, second } = this.state;
+        const inverted = this.props.marketDirections.get(marketId);
+        this.context.router.push(`/market/${!inverted ? first.get("symbol") : second.get("symbol")}_${!inverted ? second.get("symbol") : first.get("symbol")}`);
     }
 
     render() {
 
         let {base_asset, quote_asset, base_amount, quote_amount,
           marketDirections, hide_symbols, noPopOver} = this.props;
-        let invertPrice = marketDirections.get(this.state.marketId);
+        const {marketId, first, second} = this.state;
+        let inverted = marketDirections.get(marketId) || this.props.invert;
+        let base, quote;
+        if (inverted) {
+            base = second;
+            quote = first;
+        } else {
+            base = first;
+            quote = second;
+        }
+        if (base.get("id") !== base_asset.get("id")) {
+            let tempAmount = base_amount;
+            base_amount = quote_amount;
+            quote_amount = tempAmount;
+        }
+
         const price = new Price({
-            base: new Asset({
-                asset_id: this.props.base_asset.get("id"),
-                precision: this.props.base_asset.get("precision"),
+            quote: new Asset({
+                asset_id: base.get("id"),
+                precision: base.get("precision"),
                 amount: base_amount
             }),
-            quote: new Asset({
-                asset_id: this.props.quote_asset.get("id"),
-                precision: this.props.quote_asset.get("precision"),
+            base: new Asset({
+                asset_id: quote.get("id"),
+                precision: quote.get("precision"),
                 amount: quote_amount
             })
         });
-        console.log("marketId", this.state.marketId, "invertPrice", invertPrice, price.toReal());
-        if( (invertPrice) || this.props.invert) {
-            let tmp = base_asset;
-            base_asset = quote_asset;
-            quote_asset = tmp;
-            let tmp_amount = base_amount;
-            base_amount = quote_amount;
-            quote_amount = tmp_amount;
-        }
 
         let formatted_value = "";
         if (!this.props.hide_value) {
-            let base_precision = utils.get_asset_precision(base_asset.get("precision"));
-            let quote_precision = utils.get_asset_precision(quote_asset.get("precision"));
-            let value = base_amount / base_precision / (quote_amount / quote_precision);
+            let value = price.toReal();
             if (isNaN(value) || !isFinite(value)) {
                 return <span>n/a</span>;
             }
@@ -134,7 +140,11 @@ class FormattedPrice extends React.Component {
             );
         }
         let symbols = hide_symbols ? "" :
-                      (<span data-place="bottom" data-tip={noPopOver ? "Click to invert the price" : null} className={noPopOver ? "clickable inline-block" : ""} onClick={noPopOver ? this.onFlip.bind(this) : null}><AssetName name={base_asset.get("symbol")} />/<AssetName name={quote_asset.get("symbol")} /></span>);
+                      (<span data-place="bottom" data-tip={noPopOver ? "Click to invert the price" : null} className={noPopOver ? "clickable inline-block" : ""} onClick={noPopOver ? this.onFlip.bind(this) : null}>
+                          <AssetName name={quote.get("symbol")} />
+                          /
+                          <AssetName name={base.get("symbol")} />
+                      </span>);
 
         const currency_popover_body = !noPopOver && !hide_symbols ? (
           <div>
@@ -164,8 +174,6 @@ FormattedPrice = BindToChainState(FormattedPrice);
 export default class FormattedPriceWrapper extends React.Component {
 
     render() {
-        let marketId = this.props.quote_asset + "_" + this.props.base_asset;
-
         return (
           <AltContainer
             stores={[SettingsStore]}
@@ -175,7 +183,7 @@ export default class FormattedPriceWrapper extends React.Component {
                 }
             }}
           >
-            <FormattedPrice {...this.props} marketId={marketId}/>
+            <FormattedPrice {...this.props}/>
           </AltContainer>
         );
     }
diff --git a/app/lib/common/market_utils.js b/app/lib/common/market_utils.js
index be6387a28e..cddad53b66 100644
--- a/app/lib/common/market_utils.js
+++ b/app/lib/common/market_utils.js
@@ -351,12 +351,13 @@ const MarketUtils = {
         };
     },
 
-    getMarketID(directions, base, quote) {
+    getMarketID(base, quote) {
+        if (!base || !quote) return {marketId: "_"};
         let baseID = parseInt(base.get("id").split(".")[2], 10);
         let quoteID = parseInt(quote.get("id").split(".")[2], 10);
         const marketID = quoteID > baseID ? `${quote.get("symbol")}_${base.get("symbol")}` : `${base.get("symbol")}_${quote.get("symbol")}`;
 
-        return {baseID, quoteID, marketID};
+        return {baseID, quoteID, marketID, first: quoteID > baseID ? quote : base, second: quoteID > baseID ? base : quote};
     }
 };
 
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index 422e84c220..f5fd64cbd7 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -134,7 +134,7 @@ class SettingsStore {
         this.viewSettings = Immutable.Map(ss.get("viewSettings_v1"));
 
         this.marketDirections = Immutable.Map(ss.get("marketDirections"));
-
+        console.log("marketDirections", this.marketDirections.toJS());
         this.hiddenAssets = Immutable.List(ss.get("hiddenAssets", []));
 
         this.apiLatencies = ss.get("apiLatencies", {});
@@ -228,7 +228,7 @@ class SettingsStore {
         for (let key in payload) {
             this.marketDirections = this.marketDirections.set(key, payload[key]);
         }
-
+        console.log("marketDirections", this.marketDirections.toJS());
         ss.set("marketDirections", this.marketDirections.toJS());
     }
 

From 6769de8b23130903fc39ab8f967456627a1c08af Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 3 Oct 2017 23:33:13 +0200
Subject: [PATCH 12/82] Update open orders

---
 app/assets/locales/locale-en.json          | 3 ++-
 app/components/Account/AccountOrders.jsx   | 2 +-
 app/components/Account/AccountOverview.jsx | 6 +++---
 app/components/Exchange/MyOpenOrders.jsx   | 9 ++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index b2eecca274..fa2a859d1b 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -946,7 +946,8 @@
     "show_star_1": "Show",
     "show_star_2": "only",
     "base": "Base currency:",
-    "search": "Search for more markets here"
+    "search": "Search for more markets here",
+    "order_value": "Order value"
   },
   "fees": {
     "title": "Fee Schedule"
diff --git a/app/components/Account/AccountOrders.jsx b/app/components/Account/AccountOrders.jsx
index e495f972e6..dfe538ce88 100644
--- a/app/components/Account/AccountOrders.jsx
+++ b/app/components/Account/AccountOrders.jsx
@@ -107,7 +107,7 @@ class AccountOrders extends React.Component {
             if (marketOrders[market].length) {
                 tables.push(
                     <tbody key={market}>
-                        {marketIndex > 0 ? <tr><td colSpan={this.props.isMyAccount ? "7" : "6"}></td></tr> : null}
+                        {/* {marketIndex > 0 ? <tr><td colSpan={this.props.isMyAccount ? "7" : "6"}><span style={{visibility: "hidden"}}>H</span></td></tr> : null} */}
                         {marketOrders[market].sort((a, b) => {
                             return a.props.price - b.props.price;
                         })}
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index cf5ad34a83..a9d42535ca 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -454,7 +454,7 @@ class AccountOverview extends React.Component {
                 hide_asset
             />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td><Translate content="account.portfolio" /></td><td></td><td style={{textAlign: "right"}}>{portFolioBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td></td><td></td><td style={{textAlign: "right"}}>{portFolioBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -527,8 +527,8 @@ class AccountOverview extends React.Component {
                                 <AccountOrders {...this.props}>
                                     <tbody>
                                         <tr className="total-value">
-                                            <td colSpan="2"><Translate content="account.open_orders" /></td>
-                                            <td colSpan="2"></td>
+                                            <td colSpan="1"></td>
+                                            <td colSpan="3"></td>
                                             <td style={{textAlign: "center"}}>{ordersBalanceNoSymbol}</td>
                                             <td></td>
                                             {this.props.isMyAccount ? <td></td> : null}
diff --git a/app/components/Exchange/MyOpenOrders.jsx b/app/components/Exchange/MyOpenOrders.jsx
index 2d2fdbb113..096048716d 100644
--- a/app/components/Exchange/MyOpenOrders.jsx
+++ b/app/components/Exchange/MyOpenOrders.jsx
@@ -12,7 +12,6 @@ import Icon from "../Icon/Icon";
 import { ChainStore } from "bitsharesjs/es";
 import { LimitOrder, CallOrder } from "common/MarketClasses";
 const rightAlign = {textAlign: "right"};
-const leftAlign = {textAlign: "left"};
 import { EquivalentValueComponent } from "../Utility/EquivalentValueComponent";
 
 class TableHeader extends React.Component {
@@ -34,11 +33,11 @@ class TableHeader extends React.Component {
         ) : (
             <thead>
                 <tr>
-                    <th style={leftAlign}>Market</th>
+                    <th><Translate content="account.bts_market" /></th>
                     <th style={rightAlign}><Translate content="exchange.price" /></th>
                     <th style={rightAlign}><Translate content="account.qty" /></th>
-                    <th style={rightAlign}>Total</th>
-                    <th>Order Value (<AssetName name={preferredUnit} />)</th>
+                    <th style={rightAlign}><Translate content="exchange.total" /></th>
+                    <th><Translate content="exchange.order_value" /> (<AssetName name={preferredUnit} />)</th>
                     <th><Translate content="account.trade" /></th>
                     {/* <th><Translate content="transaction.expiration" /></th> */}
                     {isMyAccount ? <th><Translate content="wallet.cancel" /></th> : null}
@@ -98,7 +97,7 @@ class OrderRow extends React.Component {
             </tr>
         ) : (
             <tr key={order.id}>
-                <td style={leftAlign}>
+                <td>
                     <Link to={`/asset/${quote.get("symbol")}`}><AssetName noTip name={quote.get("symbol")} /></Link>
                     <a onClick={this.props.onFlip}>&nbsp;<Icon className="shuffle" name="shuffle"/>&nbsp;</a>
                     <Link to={`/asset/${base.get("symbol")}`}><AssetName noTip name={base.get("symbol")} /></Link>

From 59dc841507b35a79f6b4ef3a1575885ad94ce502 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 3 Oct 2017 23:46:59 +0200
Subject: [PATCH 13/82] Tweak theme colors

---
 app/assets/stylesheets/themes/_dark-theme.scss  |  6 +++---
 app/assets/stylesheets/themes/_light-theme.scss | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/themes/_dark-theme.scss b/app/assets/stylesheets/themes/_dark-theme.scss
index b61b543ea1..5ce670f13d 100644
--- a/app/assets/stylesheets/themes/_dark-theme.scss
+++ b/app/assets/stylesheets/themes/_dark-theme.scss
@@ -36,11 +36,11 @@ $header-color: #484848;
 $chat-text-color: #191A1F;
 
 // Account table view colors
-$account-header: #1A242F;
-$account-cells: #27384B;
+$account-header: #656565;
+$account-cells: #4b5158;
 $account-green: #7ED321;
 $account-primarytext: white;
-$account-dimmed: #606060;
+$account-dimmed: #afafaf;
 $account-border: #323131;
 $account-background: #3f3f3f;
 
diff --git a/app/assets/stylesheets/themes/_light-theme.scss b/app/assets/stylesheets/themes/_light-theme.scss
index 5a5c21bacf..22f9338f1f 100644
--- a/app/assets/stylesheets/themes/_light-theme.scss
+++ b/app/assets/stylesheets/themes/_light-theme.scss
@@ -37,12 +37,12 @@ $header-color: #DCDCDC;
 $chat-text-color: #191A1F;
 
 // Account table view colors
-$account-header: #1A242F;
-$account-cells: #27384B;
-$account-green: #7ED321;
-$account-primarytext: white;
-$account-dimmed: #606060;
-$account-border: #323131;
+$account-header: #b1b1b1;
+$account-cells: #dadada;
+$account-green: #488a00;
+$account-primarytext: $primary-text-color;
+$account-dimmed: #5d5d5d;
+$account-border: rgba(50, 49, 49, 0.1);
 $account-background: #e5e6e4;
 
 .lightTheme {

From 96133574468562aeb60654f0506dd43d1c1cf81e Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 3 Oct 2017 23:57:14 +0200
Subject: [PATCH 14/82] Improve portfolio active/hidden

---
 app/components/Account/AccountOverview.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index a9d42535ca..9b696ad0e7 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -206,7 +206,7 @@ class AccountOverview extends React.Component {
             }
             balances.push(
                 <tr key={asset.get("symbol")} style={{maxWidth: "100rem"}}>
-                    <td style={{textAlign: "left"}}><AssetName name={asset.get("symbol")} /></td>
+                    <td><AssetName name={asset.get("symbol")} /></td>
                     <td style={{textAlign: "right"}}>
                         {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} hide_asset /> : null}
                     </td>
@@ -298,7 +298,7 @@ class AccountOverview extends React.Component {
                     let {isBitAsset, borrowModal, borrowLink} = renderBorrow(asset, this.props.account);
                     if (includeAsset && visible || !includeAsset && !visible) balances.push(
                         <tr key={"zz" + a} style={{maxWidth: "100rem"}}>
-                            <td style={{textAlign: "left"}}>
+                            <td>
                                 <AssetName name={a} />
                             </td>
                             <td colSpan="3"></td>
@@ -488,19 +488,19 @@ class AccountOverview extends React.Component {
 
                             <Tab title="account.portfolio" subText={portFolioBalanceNoSymbol}>
                                 <div className="hide-selector">
-                                    <div className={cnames("inline-block", {inactive: showHidden})} onClick={showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
+                                    <div className={cnames("inline-block", {inactive: showHidden && hiddenBalances.length})} onClick={showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
                                         <Translate content="account.hide_hidden" />
                                     </div>
-                                    <div className={cnames("inline-block", {inactive: !showHidden})} onClick={!showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
+                                    {hiddenBalances.length ? <div className={cnames("inline-block", {inactive: !showHidden})} onClick={!showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
                                         <Translate content="account.show_hidden" />
-                                    </div>
+                                    </div> : null}
                                 </div>
 
                                 <table className="table dashboard-table">
                                     <thead>
                                         <tr>
                                             {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
-                                            <th style={{textAlign: "left"}}><Translate component="span" content="account.asset" /></th>
+                                            <th><Translate component="span" content="account.asset" /></th>
                                             <th style={{textAlign: "right"}}><Translate content="account.qty" /></th>
                                             {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
                                             <th style={{textAlign: "right"}} className="column-hide-small">
@@ -518,7 +518,7 @@ class AccountOverview extends React.Component {
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {showHidden ? hiddenBalances : includedBalances}
+                                        {showHidden && hiddenBalances.length ? hiddenBalances : includedBalances}
                                     </tbody>
                                 </table>
                             </Tab>

From 99203981b6a54f7b39f832ccae960fd1f0064659 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 00:08:27 +0200
Subject: [PATCH 15/82] Update margin position price and icon fill color

---
 app/assets/locales/locale-en.json                  | 1 +
 app/assets/stylesheets/themes/_theme-template.scss | 3 +++
 app/components/Blockchain/CollateralPosition.jsx   | 8 +++-----
 app/stores/SettingsStore.js                        | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index a498657981..ec99696a58 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1130,6 +1130,7 @@
     "coll_ratio": "Collateral ratio",
     "call_limit": "Market Call Limit",
     "adjust": "Update position",
+    "adjust_short": "Adjust",
     "close": "Close position",
     "update": "Update",
     "errors": {
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index 42aeae5ad8..f8844d63ef 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -1285,6 +1285,9 @@
                 background-color: $account-cells;
                 color: $account-primarytext;
                 border: 1px solid $account-border;
+                .icon > svg > path {
+                    fill: $account-primarytext;
+                }
             }
             &.total-value {
                 td {
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index 0e267bd7f4..5860f7a18f 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -172,10 +172,9 @@ class CollateralPosition extends React.Component {
                         decimals={2}
                         base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
                         quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
-                        hide_symbols
                     />
                 </td>
-                <td><AssetName name={debtAsset.get("symbol")} />/<AssetName name={collateralAsset.get("symbol")} /></td>
+                {/* <td><AssetName name={debtAsset.get("symbol")} />/<AssetName name={collateralAsset.get("symbol")} /></td> */}
 
                 <td>
                     <div
@@ -248,9 +247,8 @@ const CollateralTable = ({callOrders, account, className}) => {
                         <Translate content="exchange.call" />
                     </div>
                 </th>
-                <th>Units</th>
-                <th>Adjust</th>
-                <th>Close</th>
+                <th><Translate content="borrow.adjust_short" /></th>
+                <th><Translate content="transfer.close" /></th>
             </tr>
             </thead>
             <tbody>
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index f5fd64cbd7..3a66fb9bc0 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -134,7 +134,7 @@ class SettingsStore {
         this.viewSettings = Immutable.Map(ss.get("viewSettings_v1"));
 
         this.marketDirections = Immutable.Map(ss.get("marketDirections"));
-        console.log("marketDirections", this.marketDirections.toJS());
+        
         this.hiddenAssets = Immutable.List(ss.get("hiddenAssets", []));
 
         this.apiLatencies = ss.get("apiLatencies", {});

From a53004f742ac7a56cdb76f0e791b9245e67b8a9e Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 11:39:18 +0200
Subject: [PATCH 16/82] Display preferred assets with prefixes

---
 app/components/Settings/SettingsEntry.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/SettingsEntry.jsx b/app/components/Settings/SettingsEntry.jsx
index 42cd182e45..51195a3d98 100644
--- a/app/components/Settings/SettingsEntry.jsx
+++ b/app/components/Settings/SettingsEntry.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import counterpart from "counterpart";
 import Translate from "react-translate-component";
 import SettingsActions from "actions/SettingsActions";
-
+import AssetName from "../Utility/AssetName";
 export default class SettingsEntry extends React.Component {
 
     constructor() {
@@ -99,7 +99,9 @@ export default class SettingsEntry extends React.Component {
                 if (defaults) {
                     options = defaults.map((entry, index) => {
                         let option = entry.translate ? counterpart.translate(`settings.${entry.translate}`) : entry;
-
+                        if (setting === "unit") {
+                            option = <AssetName name={entry} />;
+                        }
                         let key = entry.translate ? entry.translate : entry;
                         return <option value={entry.translate ? entry.translate : entry} key={key}>{option}</option>;
                     });

From 0430659242288f03fb4683565e1a3d29680e2c6a Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 11:40:29 +0200
Subject: [PATCH 17/82] Improve margin positions, refactor totalbalancevalue to
 include different collateral assets

---
 app/assets/locales/locale-en.json             |  5 +-
 app/assets/stylesheets/_shame.scss            |  1 +
 .../stylesheets/themes/_theme-template.scss   |  3 +-
 app/components/Account/AccountOrders.jsx      |  1 -
 app/components/Account/AccountOverview.jsx    | 60 ++++++++++++++-----
 .../Blockchain/CollateralPosition.jsx         | 33 ++++++++--
 app/components/Dashboard/DashboardList.jsx    | 10 +++-
 app/components/Exchange/MyOpenOrders.jsx      |  8 ++-
 app/components/Utility/FormattedPrice.jsx     | 30 ++++++----
 app/components/Utility/TotalBalanceValue.jsx  | 33 +++++++---
 app/stores/SettingsStore.js                   |  3 +-
 11 files changed, 134 insertions(+), 53 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index ec99696a58..54de333d5f 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -677,7 +677,8 @@
       "symbol": "Symbol",
       "id": "ID",
       "issuer": "Issuer",
-      "precision": "Precision"
+      "precision": "Precision",
+      "units": "Units"
     },
     "asset": {
       "title": "Asset",
@@ -1127,7 +1128,7 @@
   "borrow": {
     "title": "%(asset_symbol)s Margin",
     "no_valid": "No valid feeds for %(asset_symbol)s",
-    "coll_ratio": "Collateral ratio",
+    "coll_ratio": "Ratio",
     "call_limit": "Market Call Limit",
     "adjust": "Update position",
     "adjust_short": "Adjust",
diff --git a/app/assets/stylesheets/_shame.scss b/app/assets/stylesheets/_shame.scss
index f215f7e99f..8278f45815 100644
--- a/app/assets/stylesheets/_shame.scss
+++ b/app/assets/stylesheets/_shame.scss
@@ -339,6 +339,7 @@ label.inline {
 .asset-prefix-replaced {
   // text-transform: uppercase;
   font-variant: small-caps;
+  text-transform: none;
 }
 
 select {
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index f8844d63ef..9e9ab0d8e5 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -1293,8 +1293,9 @@
                 td {
                     background-color: $account-header;
                 }
-                td:nth-child(3) {
+                td:nth-child(n+2) {
                     color: $account-green;
+                    text-align: right;
                 }
             }
         }
diff --git a/app/components/Account/AccountOrders.jsx b/app/components/Account/AccountOrders.jsx
index dfe538ce88..6af028b9a8 100644
--- a/app/components/Account/AccountOrders.jsx
+++ b/app/components/Account/AccountOrders.jsx
@@ -70,7 +70,6 @@ class AccountOrders extends React.Component {
                     }
                 }
                 let limitOrder = new LimitOrder(order, assets, markets[marketID].quote.id);
-                console.log("marketID", marketID, "direction", direction, limitOrder.market_base, "isBid", limitOrder.isBid())
 
                 let marketBase = ChainStore.getAsset(markets[marketID].base.id);
                 let marketQuote = ChainStore.getAsset(markets[marketID].quote.id);
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 9b696ad0e7..84413c2d66 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -369,7 +369,7 @@ class AccountOverview extends React.Component {
             return null;
         }
 
-        let call_orders = [], collateral = 0, debt = {};
+        let call_orders = [], collateral = {}, debt = {};
 
         if (account.toJS && account.has("call_orders")) call_orders = account.get("call_orders").toJS();
         let includedBalances, hiddenBalances, includedOrders, hiddenOrders;
@@ -379,8 +379,12 @@ class AccountOverview extends React.Component {
         call_orders.forEach( (callID) => {
             let position = ChainStore.getObject(callID);
             if (position) {
-                collateral += parseInt(position.get("collateral"), 10);
-
+                let collateralAsset = position.getIn(["call_price", "base", "asset_id"]);
+                if (!collateral[collateralAsset]) {
+                    collateral[collateralAsset] = parseInt(position.get("collateral"), 10);
+                } else {
+                    collateral[collateralAsset] += parseInt(position.get("collateral"), 10);
+                }
                 let debtAsset = position.getIn(["call_price", "quote", "asset_id"]);
                 if (!debt[debtAsset]) {
                     debt[debtAsset] = parseInt(position.get("debt"), 10);
@@ -423,7 +427,8 @@ class AccountOverview extends React.Component {
         // }
 
         let totalBalanceList = includedBalancesList.concat(hiddenBalancesList);
-        let totalBalanceNoSymbol =
+        console.log("debt", debt, "collateral", collateral);
+        let totalValue =
             <TotalBalanceValue
                 noTip
                 balances={totalBalanceList}
@@ -432,29 +437,43 @@ class AccountOverview extends React.Component {
                 collateral={collateral}
                 hide_asset
             />;
-        let portFolioBalanceNoSymbol =
+        let portFolioValue =
             <TotalBalanceValue
                 noTip
                 balances={totalBalanceList}
                 hide_asset
             />;
-        let ordersBalanceNoSymbol =
+        let ordersValue =
             <TotalBalanceValue
                 noTip
                 balances={Immutable.List()}
                 openOrders={orders}
                 hide_asset
             />;
-        let collateralBalanceNoSymbol =
+        let marginValue =
+            <TotalBalanceValue
+                noTip
+                balances={Immutable.List()}
+                debt={debt}
+                collateral={collateral}
+                hide_asset
+            />;
+        let debtValue =
             <TotalBalanceValue
                 noTip
                 balances={Immutable.List()}
                 debt={debt}
+                hide_asset
+            />;
+        let collateralValue =
+            <TotalBalanceValue
+                noTip
+                balances={Immutable.List()}
                 collateral={collateral}
                 hide_asset
             />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td></td><td></td><td style={{textAlign: "right"}}>{portFolioBalanceNoSymbol}</td><td colSpan="8"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td></td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -482,11 +501,11 @@ class AccountOverview extends React.Component {
                     <div className="generic-bordered-box">
                         <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">
 
-                            <Tab disabled className="total-value" title={counterpart.translate("account.eq_value", {asset: assetName})} subText={totalBalanceNoSymbol}>
+                            <Tab disabled className="total-value" title={counterpart.translate("account.eq_value", {asset: assetName})} subText={totalValue}>
 
                             </Tab>
 
-                            <Tab title="account.portfolio" subText={portFolioBalanceNoSymbol}>
+                            <Tab title="account.portfolio" subText={portFolioValue}>
                                 <div className="hide-selector">
                                     <div className={cnames("inline-block", {inactive: showHidden && hiddenBalances.length})} onClick={showHidden ? this._toggleHiddenAssets.bind(this) : () => {}}>
                                         <Translate content="account.hide_hidden" />
@@ -523,26 +542,35 @@ class AccountOverview extends React.Component {
                                 </table>
                             </Tab>
 
-                            <Tab title="account.open_orders" subText={ordersBalanceNoSymbol}>
+                            <Tab title="account.open_orders" subText={ordersValue}>
                                 <AccountOrders {...this.props}>
                                     <tbody>
                                         <tr className="total-value">
-                                            <td colSpan="1"></td>
                                             <td colSpan="3"></td>
-                                            <td style={{textAlign: "center"}}>{ordersBalanceNoSymbol}</td>
-                                            <td></td>
+                                            <td colSpan="3"></td>
+                                            <td style={{textAlign: "center"}}>{ordersValue}</td>
+                                            <td colSpan="1"></td>
                                             {this.props.isMyAccount ? <td></td> : null}
                                         </tr>
                                     </tbody>
                                 </AccountOrders>
                             </Tab>
 
-                            <Tab title="account.collaterals" subText={collateralBalanceNoSymbol}>
+                            <Tab title="account.collaterals" subText={marginValue}>
                                 {call_orders.length > 0 ? (
 
                                 <div className="content-block">
                                     <div className="generic-bordered-box">
-                                        <CollateralPosition className="dashboard-table" callOrders={call_orders} account={account} />
+                                        <CollateralPosition className="dashboard-table" callOrders={call_orders} account={account}>
+                                            <tr className="total-value">
+                                                <td>Totals (<AssetName name={preferredUnit} />)</td>
+                                                <td>{debtValue}</td>
+                                                <td>{collateralValue}</td>
+                                                <td></td>
+                                                <td>{marginValue}</td>
+                                                <td colSpan="4"></td>
+                                            </tr>
+                                        </CollateralPosition>
                                     </div>
                                 </div>) : null}
                             </Tab>
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index 5860f7a18f..5ccc4f0eec 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -11,6 +11,8 @@ import Translate from "react-translate-component";
 import utils from "common/utils";
 import counterpart from "counterpart";
 import Icon from "../Icon/Icon";
+import TotalBalanceValue from "../Utility/TotalBalanceValue";
+import {List} from "immutable";
 
 const wallet_api = new WalletApi();
 const alignRight = {textAlign: "right"};
@@ -167,11 +169,29 @@ class CollateralPosition extends React.Component {
                     />
                 </td>
                 <td data-place="bottom" data-tip={this._getCRTip()} className={"center-content "+ statusClass} >{utils.format_number(cr, 2)}</td>
-                <td className={"center-content column-hide-small"}>
+                <td style={alignRight} >
+                    <TotalBalanceValue
+                        noTip
+                        balances={List()}
+                        debt={{[debtAsset.get("id")] : co.debt}}
+                        collateral={{[collateralAsset.get("id")]: parseInt(co.collateral, 10)}}
+                        hide_asset
+                    />
+                </td>
+                <td style={alignRight} className={"center-content column-hide-small"}>
+                    <FormattedPrice
+                        decimals={2}
+                        base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
+                        quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
+                        hide_symbols
+                    />
+                </td>
+                <td className={"center-content column-hide-small"} style={alignLeft}>
                     <FormattedPrice
                         decimals={2}
                         base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
                         quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
+                        hide_value
                     />
                 </td>
                 {/* <td><AssetName name={debtAsset.get("symbol")} />/<AssetName name={collateralAsset.get("symbol")} /></td> */}
@@ -228,31 +248,34 @@ class CollateralPositionWrapper extends React.Component {
 
 CollateralPositionWrapper = BindToChainState(CollateralPositionWrapper, {keep_updating: true});
 
-const CollateralTable = ({callOrders, account, className}) => {
+const CollateralTable = ({callOrders, account, className, children}) => {
 
     return (
         <table className={"table " + className}>
             <thead>
             <tr>
-                <th style={alignLeft}><Translate content="transaction.borrow_amount" /></th>
-                <th style={alignRight}><Translate content="account.qty" /></th>
+                <th style={alignLeft}><Translate content="explorer.asset.title" /></th>
+                <th style={alignRight}><Translate content="transaction.borrow_amount" /></th>
                 <th style={alignRight} className="column-hide-medium"><Translate content="transaction.collateral" /></th>
                 <th>
                     <div className="tooltip inline-block" data-place="top" data-tip={counterpart.translate("tooltip.coll_ratio")}>
                         <Translate content="borrow.coll_ratio" />
                     </div>
                 </th>
-                <th className="column-hide-small">
+                <th>Value</th>
+                <th style={alignRight} className="column-hide-small">
                     <div className="tooltip inline-block" data-place="top" data-tip={counterpart.translate("tooltip.call_price")}>
                         <Translate content="exchange.call" />
                     </div>
                 </th>
+                <th style={alignLeft}><Translate content="explorer.assets.units" /></th>
                 <th><Translate content="borrow.adjust_short" /></th>
                 <th><Translate content="transfer.close" /></th>
             </tr>
             </thead>
             <tbody>
                 { callOrders.sort((a, b) => (a.split(".")[2] - b.split(".")[2])).map(id => <CollateralPositionWrapper key={id} object={id} account={account}/>) }
+                { children }
             </tbody>
         </table>
     );
diff --git a/app/components/Dashboard/DashboardList.jsx b/app/components/Dashboard/DashboardList.jsx
index a96b92b86a..d0a3bfd0db 100644
--- a/app/components/Dashboard/DashboardList.jsx
+++ b/app/components/Dashboard/DashboardList.jsx
@@ -138,7 +138,7 @@ class DashboardList extends React.Component {
 		}).map(account => {
 
 			if (account) {
-				let collateral = 0, debt = {}, openOrders = {};
+				let collateral = {}, debt = {}, openOrders = {};
 				balanceList = balanceList.clear();
 
 				let accountName = account.get("name");
@@ -164,8 +164,12 @@ class DashboardList extends React.Component {
 					account.get("call_orders").forEach( (callID, key) => {
 						let position = ChainStore.getObject(callID);
 						if (position) {
-							collateral += parseInt(position.get("collateral"), 10);
-
+							let collateralAsset = position.getIn(["call_price", "base", "asset_id"]);
+			                if (!collateral[collateralAsset]) {
+			                    collateral[collateralAsset] = parseInt(position.get("collateral"), 10);
+			                } else {
+			                    collateral[collateralAsset] += parseInt(position.get("collateral"), 10);
+			                }
 							let debtAsset = position.getIn(["call_price", "quote", "asset_id"]);
 							if (!debt[debtAsset]) {
 								debt[debtAsset] = parseInt(position.get("debt"), 10);
diff --git a/app/components/Exchange/MyOpenOrders.jsx b/app/components/Exchange/MyOpenOrders.jsx
index 096048716d..a414ebe8b2 100644
--- a/app/components/Exchange/MyOpenOrders.jsx
+++ b/app/components/Exchange/MyOpenOrders.jsx
@@ -33,7 +33,7 @@ class TableHeader extends React.Component {
         ) : (
             <thead>
                 <tr>
-                    <th><Translate content="account.bts_market" /></th>
+                    <th colSpan="3"><Translate content="account.bts_market" /></th>
                     <th style={rightAlign}><Translate content="exchange.price" /></th>
                     <th style={rightAlign}><Translate content="account.qty" /></th>
                     <th style={rightAlign}><Translate content="exchange.total" /></th>
@@ -97,9 +97,13 @@ class OrderRow extends React.Component {
             </tr>
         ) : (
             <tr key={order.id}>
-                <td>
+                <td style={{textAlign: "right", paddingLeft: 0, borderRight: "none"}}>
                     <Link to={`/asset/${quote.get("symbol")}`}><AssetName noTip name={quote.get("symbol")} /></Link>
+                </td>
+                <td style={{borderLeft: "none", borderRight: "none"}}>
                     <a onClick={this.props.onFlip}>&nbsp;<Icon className="shuffle" name="shuffle"/>&nbsp;</a>
+                </td>
+                <td style={{textAlign: "left", paddingRight: 0, borderLeft: "none"}}>
                     <Link to={`/asset/${base.get("symbol")}`}><AssetName noTip name={base.get("symbol")} /></Link>
                 </td>
                 <td className={tdClass} style={rightAlign}>
diff --git a/app/components/Utility/FormattedPrice.jsx b/app/components/Utility/FormattedPrice.jsx
index 4b011d5e25..6dbf9a5eb1 100644
--- a/app/components/Utility/FormattedPrice.jsx
+++ b/app/components/Utility/FormattedPrice.jsx
@@ -107,18 +107,24 @@ class FormattedPrice extends React.Component {
             quote_amount = tempAmount;
         }
 
-        const price = new Price({
-            quote: new Asset({
-                asset_id: base.get("id"),
-                precision: base.get("precision"),
-                amount: base_amount
-            }),
-            base: new Asset({
-                asset_id: quote.get("id"),
-                precision: quote.get("precision"),
-                amount: quote_amount
-            })
-        });
+        let price;
+        try {
+            price = new Price({
+                quote: new Asset({
+                    asset_id: base.get("id"),
+                    precision: base.get("precision"),
+                    amount: base_amount
+                }),
+                base: new Asset({
+                    asset_id: quote.get("id"),
+                    precision: quote.get("precision"),
+                    amount: quote_amount
+                })
+            });
+        } catch(err) {
+            return null;
+        }
+
 
         let formatted_value = "";
         if (!this.props.hide_value) {
diff --git a/app/components/Utility/TotalBalanceValue.jsx b/app/components/Utility/TotalBalanceValue.jsx
index 50d517bd5f..e42b0b5f14 100644
--- a/app/components/Utility/TotalBalanceValue.jsx
+++ b/app/components/Utility/TotalBalanceValue.jsx
@@ -131,7 +131,7 @@ class TotalValue extends React.Component {
                                        fromID,
                                        toID);
 
-        return price ? utils.convertValue(price, amount, fromAsset, toAsset) : null;
+        return price ? utils.convertValue(price, amount, fromAsset, toAsset) : 0;
     }
 
     _assetValues(totals, amount, asset) {
@@ -164,10 +164,15 @@ class TotalValue extends React.Component {
         let assetValues = {};
 
         // Collateral value
-        let collateralValue = this._convertValue(collateral, coreAsset, toAsset, marketStats, coreAsset);
-
-        totalValue += collateralValue;
-        assetValues = this._assetValues(assetValues, collateralValue, coreAsset.get("id"));
+        if (Object.keys(collateral).length === 1) debugger;
+        for (let asset in collateral) {
+            let fromAsset = assets[asset];
+            if (fromAsset) {
+                let collateralValue = this._convertValue(collateral[asset], fromAsset, toAsset, marketStats, coreAsset);
+                totalValue += collateralValue;
+                assetValues = this._assetValues(assetValues, collateralValue, fromAsset.get("id"));
+            }
+        }
 
         // Open orders value
         for (let asset in openOrders) {
@@ -294,7 +299,7 @@ class TotalBalanceValue extends React.Component {
     };
 
     static defaultProps = {
-        collateral: 0,
+        collateral: {},
         debt: {},
         openOrders: {}
     };
@@ -311,6 +316,12 @@ class TotalBalanceValue extends React.Component {
             }
         });
 
+        for (let asset in collateral) {
+            if (!assets.has(asset)) {
+                assets = assets.push(asset);
+            }
+        }
+
         for (let asset in debt) {
             if (!assets.has(asset)) {
                 assets = assets.push(asset);
@@ -339,7 +350,7 @@ class AccountWrapper extends React.Component {
     }
 
     render() {
-        let balanceList = Immutable.List(), collateral = 0, debt = {}, openOrders = {};
+        let balanceList = Immutable.List(), collateral = {}, debt = {}, openOrders = {};
 
         this.props.accounts.forEach(account => {
 
@@ -360,8 +371,12 @@ class AccountWrapper extends React.Component {
                 account.get("call_orders") && account.get("call_orders").forEach( (callID, key) => {
                     let position = ChainStore.getObject(callID);
                     if (position) {
-                        collateral += parseInt(position.get("collateral"), 10);
-
+                        let collateralAsset = position.getIn(["call_price", "base", "asset_id"]);
+                        if (!collateral[collateralAsset]) {
+                            collateral[collateralAsset] = parseInt(position.get("collateral"), 10);
+                        } else {
+                            collateral[collateralAsset] += parseInt(position.get("collateral"), 10);
+                        }
                         let debtAsset = position.getIn(["call_price", "quote", "asset_id"]);
                         if (!debt[debtAsset]) {
                             debt[debtAsset] = parseInt(position.get("debt"), 10);
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index 3a66fb9bc0..0811104297 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -134,7 +134,7 @@ class SettingsStore {
         this.viewSettings = Immutable.Map(ss.get("viewSettings_v1"));
 
         this.marketDirections = Immutable.Map(ss.get("marketDirections"));
-        
+
         this.hiddenAssets = Immutable.List(ss.get("hiddenAssets", []));
 
         this.apiLatencies = ss.get("apiLatencies", {});
@@ -228,7 +228,6 @@ class SettingsStore {
         for (let key in payload) {
             this.marketDirections = this.marketDirections.set(key, payload[key]);
         }
-        console.log("marketDirections", this.marketDirections.toJS());
         ss.set("marketDirections", this.marketDirections.toJS());
     }
 

From ae6576ad0d5c9d0e8007b1e2280e6641bde10e9b Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 12:08:03 +0200
Subject: [PATCH 18/82] Add asset link to debt asset

---
 app/components/Account/AccountOverview.jsx       | 4 ++--
 app/components/Account/AccountVoting.jsx         | 2 +-
 app/components/Account/AccountVotingProxy.jsx    | 2 +-
 app/components/Blockchain/CollateralPosition.jsx | 5 ++++-
 app/components/LoginSelector.jsx                 | 2 +-
 app/components/Utility/TotalBalanceValue.jsx     | 1 -
 app/components/Wallet/Backup.jsx                 | 2 +-
 app/components/Wallet/WalletChangePassword.jsx   | 2 +-
 app/components/Wallet/WalletCreate.jsx           | 2 +-
 app/routerTransition.js                          | 1 -
 10 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 84413c2d66..83a7e8b031 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -14,7 +14,7 @@ import SettingsActions from "actions/SettingsActions";
 import assetUtils from "common/asset_utils";
 import counterpart from "counterpart";
 import Icon from "../Icon/Icon";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import ChainTypes from "../Utility/ChainTypes";
 import FormattedAsset from "../Utility/FormattedAsset";
 import BindToChainState from "../Utility/BindToChainState";
@@ -427,7 +427,7 @@ class AccountOverview extends React.Component {
         // }
 
         let totalBalanceList = includedBalancesList.concat(hiddenBalancesList);
-        console.log("debt", debt, "collateral", collateral);
+
         let totalValue =
             <TotalBalanceValue
                 noTip
diff --git a/app/components/Account/AccountVoting.jsx b/app/components/Account/AccountVoting.jsx
index f785f062cd..48237448b9 100644
--- a/app/components/Account/AccountVoting.jsx
+++ b/app/components/Account/AccountVoting.jsx
@@ -15,7 +15,7 @@ import FormattedAsset from "../Utility/FormattedAsset";
 import BindToChainState from "../Utility/BindToChainState";
 import ChainTypes from "../Utility/ChainTypes";
 import {EquivalentValueComponent} from "../Utility/EquivalentValueComponent";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 
 let wallet_api = new WalletApi();
 
diff --git a/app/components/Account/AccountVotingProxy.jsx b/app/components/Account/AccountVotingProxy.jsx
index 1a39309507..0e9831e814 100644
--- a/app/components/Account/AccountVotingProxy.jsx
+++ b/app/components/Account/AccountVotingProxy.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import AccountSelector from "./AccountSelector";
 import BindToChainState from "../Utility/BindToChainState";
 import ChainTypes from "../Utility/ChainTypes";
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index 5ccc4f0eec..c50eeeb02e 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -13,6 +13,7 @@ import counterpart from "counterpart";
 import Icon from "../Icon/Icon";
 import TotalBalanceValue from "../Utility/TotalBalanceValue";
 import {List} from "immutable";
+import {Link} from "react-router/es";
 
 const wallet_api = new WalletApi();
 const alignRight = {textAlign: "right"};
@@ -151,7 +152,9 @@ class CollateralPosition extends React.Component {
         return (
             <tr className="margin-row">
                 <td style={alignLeft}>
-                    <AssetName name={debtAsset.get("symbol")} />
+                    <Link to={`/asset/${debtAsset.get("symbol")}`}>
+                        <AssetName noTip name={debtAsset.get("symbol")} />
+                    </Link>
                 </td>
                 <td style={alignRight}>
                     <FormattedAsset
diff --git a/app/components/LoginSelector.jsx b/app/components/LoginSelector.jsx
index 1e11bdc1bb..8a8c10b73d 100644
--- a/app/components/LoginSelector.jsx
+++ b/app/components/LoginSelector.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import Translate from "react-translate-component";
 import { isIncognito } from "feature_detect";
 
diff --git a/app/components/Utility/TotalBalanceValue.jsx b/app/components/Utility/TotalBalanceValue.jsx
index e42b0b5f14..a8759ab02a 100644
--- a/app/components/Utility/TotalBalanceValue.jsx
+++ b/app/components/Utility/TotalBalanceValue.jsx
@@ -164,7 +164,6 @@ class TotalValue extends React.Component {
         let assetValues = {};
 
         // Collateral value
-        if (Object.keys(collateral).length === 1) debugger;
         for (let asset in collateral) {
             let fromAsset = assets[asset];
             if (fromAsset) {
diff --git a/app/components/Wallet/Backup.jsx b/app/components/Wallet/Backup.jsx
index 186d008efa..b45ca80aef 100644
--- a/app/components/Wallet/Backup.jsx
+++ b/app/components/Wallet/Backup.jsx
@@ -1,5 +1,5 @@
 import React, {PropTypes, Component} from "react";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import {FormattedDate} from "react-intl";
 import { connect } from "alt-react";
 import WalletActions from "actions/WalletActions";
diff --git a/app/components/Wallet/WalletChangePassword.jsx b/app/components/Wallet/WalletChangePassword.jsx
index 1d436c19af..a6825f3292 100644
--- a/app/components/Wallet/WalletChangePassword.jsx
+++ b/app/components/Wallet/WalletChangePassword.jsx
@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import Translate from "react-translate-component";
 import notify from "actions/NotificationActions";
 import cname from "classnames";
diff --git a/app/components/Wallet/WalletCreate.jsx b/app/components/Wallet/WalletCreate.jsx
index bab8443cf0..0963d854f0 100644
--- a/app/components/Wallet/WalletCreate.jsx
+++ b/app/components/Wallet/WalletCreate.jsx
@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Link} from "react-router";
+import {Link} from "react-router/es";
 import Translate from "react-translate-component";
 import BrainkeyInput from "components/Wallet/BrainkeyInput";
 import PasswordConfirm from "components/Wallet/PasswordConfirm";
diff --git a/app/routerTransition.js b/app/routerTransition.js
index 34d8ee606b..63dc9d3d91 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -101,7 +101,6 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
                         replaceState("/dashboard");
                     }
                 }).then(() => {
-                    console.log("onConnect", chainChanged);
                     if (chainChanged) {
                         ChainStore.clearCache();
                         ChainStore.subscribed = false;

From 9d1349af5dc8972a96a90a658bd8cd8d923cf3b2 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 14:33:09 +0200
Subject: [PATCH 19/82] Use AssetName for preferred unit headers

---
 app/assets/locales/locale-en.json             |  7 ++--
 app/components/Account/AccountOverview.jsx    | 37 ++++++++++++++-----
 .../Blockchain/CollateralPosition.jsx         | 13 ++++++-
 .../Blockchain/LinkToAccountById.jsx          |  3 +-
 app/components/Blockchain/LinkToAssetById.jsx |  6 ++-
 app/components/Utility/Tabs.jsx               |  3 +-
 app/components/Utility/TranslateWithLinks.jsx |  9 +++--
 7 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 54de333d5f..4ad135b29a 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -345,7 +345,7 @@
       "not_yours": "Not your account"
     },
     "collaterals": "Margin Positions",
-    "eq_value": "Estimated %(asset)s",
+    "eq_value": "Estimated",
     "no_price": "Unknown value",
     "percent": "Percent of total supply",
     "please_create_account": "Please create an account",
@@ -367,8 +367,9 @@
     "asset_details": "Asset details",
     "portfolio": "Portfolio",
     "activity": "Activity",
-    "eq_value_header": "Value (%(asset)s)",
-    "qty": "Qty"
+    "eq_value_header": "Value ({asset})",
+    "qty": "Qty",
+    "total": "Total ({asset})"
   },
   "pagination": {
     "newer": "Newer",
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 83a7e8b031..6527899fc3 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -28,6 +28,7 @@ import GatewayActions from "actions/GatewayActions";
 import {Tabs, Tab} from "../Utility/Tabs";
 import AccountOrders from "./AccountOrders";
 import cnames from "classnames";
+import TranslateWithLinks from "../Utility/TranslateWithLinks";
 
 class AccountOverview extends React.Component {
 
@@ -473,7 +474,16 @@ class AccountOverview extends React.Component {
                 hide_asset
             />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td></td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
+        const preferredUnit = settings.get("unit") || "1.3.0";
+        const totalValueText = <TranslateWithLinks
+            noLink
+            string="account.total"
+            keys={[
+                {type: "asset", value: preferredUnit, arg: "asset"}
+            ]}
+        />;
+
+        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -486,7 +496,6 @@ class AccountOverview extends React.Component {
         }) || {};
         const currentBridges = this.props.bridgeCoins.get(this.state.bridgeAsset) || null;
 
-        let preferredUnit = settings.get("unit") || "1.3.0";
         const preferredAsset = ChainStore.getAsset(preferredUnit);
         let assetName = !!preferredAsset ? preferredAsset.get("symbol") : "";
         if (preferredAsset) {
@@ -501,7 +510,7 @@ class AccountOverview extends React.Component {
                     <div className="generic-bordered-box">
                         <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">
 
-                            <Tab disabled className="total-value" title={counterpart.translate("account.eq_value", {asset: assetName})} subText={totalValue}>
+                            <Tab disabled className="total-value" title={<span>{counterpart.translate("account.eq_value")}&nbsp;<AssetName name={preferredUnit} noTip /></span>} subText={totalValue}>
 
                             </Tab>
 
@@ -523,7 +532,13 @@ class AccountOverview extends React.Component {
                                             <th style={{textAlign: "right"}}><Translate content="account.qty" /></th>
                                             {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
                                             <th style={{textAlign: "right"}} className="column-hide-small">
-                                                {preferredAsset ? <Translate component="span" content="account.eq_value_header" asset={assetName} /> : null}
+                                                <TranslateWithLinks
+                                                    noLink
+                                                    string="account.eq_value_header"
+                                                    keys={[
+                                                        {type: "asset", value: preferredUnit, arg: "asset"}
+                                                    ]}
+                                                />
                                             </th>
                                             {showAssetPercent ? <th style={{textAlign: "right"}}><Translate component="span" content="account.percent" /></th> : null}
                                             <th><Translate content="header.payments" /></th>
@@ -546,7 +561,9 @@ class AccountOverview extends React.Component {
                                 <AccountOrders {...this.props}>
                                     <tbody>
                                         <tr className="total-value">
-                                            <td colSpan="3"></td>
+                                            <td style={{textAlign: "center"}} colSpan="3">
+                                                {totalValueText}
+                                            </td>
                                             <td colSpan="3"></td>
                                             <td style={{textAlign: "center"}}>{ordersValue}</td>
                                             <td colSpan="1"></td>
@@ -557,13 +574,13 @@ class AccountOverview extends React.Component {
                             </Tab>
 
                             <Tab title="account.collaterals" subText={marginValue}>
-                                {call_orders.length > 0 ? (
-
                                 <div className="content-block">
                                     <div className="generic-bordered-box">
-                                        <CollateralPosition className="dashboard-table" callOrders={call_orders} account={account}>
+                                        <CollateralPosition preferredUnit={preferredUnit} className="dashboard-table" callOrders={call_orders} account={account}>
                                             <tr className="total-value">
-                                                <td>Totals (<AssetName name={preferredUnit} />)</td>
+                                                <td>
+                                                    {totalValueText}
+                                                </td>
                                                 <td>{debtValue}</td>
                                                 <td>{collateralValue}</td>
                                                 <td></td>
@@ -572,7 +589,7 @@ class AccountOverview extends React.Component {
                                             </tr>
                                         </CollateralPosition>
                                     </div>
-                                </div>) : null}
+                                </div>
                             </Tab>
 
                             {/* <Tab title="markets.title" subText={hiddenSubText}>
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index c50eeeb02e..32a3acd7b9 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -14,6 +14,7 @@ import Icon from "../Icon/Icon";
 import TotalBalanceValue from "../Utility/TotalBalanceValue";
 import {List} from "immutable";
 import {Link} from "react-router/es";
+import TranslateWithLinks from "../Utility/TranslateWithLinks";
 
 const wallet_api = new WalletApi();
 const alignRight = {textAlign: "right"};
@@ -251,7 +252,7 @@ class CollateralPositionWrapper extends React.Component {
 
 CollateralPositionWrapper = BindToChainState(CollateralPositionWrapper, {keep_updating: true});
 
-const CollateralTable = ({callOrders, account, className, children}) => {
+const CollateralTable = ({callOrders, account, className, children, preferredUnit}) => {
 
     return (
         <table className={"table " + className}>
@@ -265,7 +266,15 @@ const CollateralTable = ({callOrders, account, className, children}) => {
                         <Translate content="borrow.coll_ratio" />
                     </div>
                 </th>
-                <th>Value</th>
+                <th>
+                    <TranslateWithLinks
+                        noLink
+                        string="account.total"
+                        keys={[
+                            {type: "asset", value: preferredUnit, arg: "asset"}
+                        ]}
+                    />
+                </th>
                 <th style={alignRight} className="column-hide-small">
                     <div className="tooltip inline-block" data-place="top" data-tip={counterpart.translate("tooltip.call_price")}>
                         <Translate content="exchange.call" />
diff --git a/app/components/Blockchain/LinkToAccountById.jsx b/app/components/Blockchain/LinkToAccountById.jsx
index 79cead7046..e29bbd87ad 100644
--- a/app/components/Blockchain/LinkToAccountById.jsx
+++ b/app/components/Blockchain/LinkToAccountById.jsx
@@ -28,7 +28,8 @@ class LinkToAccountById extends React.Component {
             return <span>{this.props.account.get("id")}</span>;
         }
 
-        return <Link onClick={this.props.onClick ? this.props.onClick : () => {}} to={`/account/${account_name}/${this.props.subpage}/`}>{account_name}</Link>;
+        return this.props.noLink ? <span>{account_name}</span> :
+            <Link onClick={this.props.onClick ? this.props.onClick : () => {}} to={`/account/${account_name}/${this.props.subpage}/`}>{account_name}</Link>;
     }
 }
 
diff --git a/app/components/Blockchain/LinkToAssetById.jsx b/app/components/Blockchain/LinkToAssetById.jsx
index 296dd19188..b28c6894e1 100644
--- a/app/components/Blockchain/LinkToAssetById.jsx
+++ b/app/components/Blockchain/LinkToAssetById.jsx
@@ -2,14 +2,16 @@ import React from "react";
 import {Link} from "react-router/es";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
+import AssetName from "../Utility/AssetName";
 
 class LinkToAssetById extends React.Component {
     static propTypes = {
         asset: ChainTypes.ChainObject.isRequired
     }
     render() {
-        let symbol = this.props.asset.get("symbol");
-        return <Link to={`/asset/${symbol}/`}>{symbol}</Link>;
+        const symbol = this.props.asset.get("symbol");
+        const assetName = <AssetName name={symbol} noTip />;
+        return this.props.noLink ? assetName : <Link to={`/asset/${symbol}/`}>{assetName}</Link>;
     }
 }
 
diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
index 6c13d0718f..885cfa42eb 100644
--- a/app/components/Utility/Tabs.jsx
+++ b/app/components/Utility/Tabs.jsx
@@ -25,7 +25,6 @@ import SettingsStore from "stores/SettingsStore";
 class Tab extends React.Component {
 
     static propTypes = {
-        title: PropTypes.string.isRequired,
         changeTab: PropTypes.func,
         isActive: PropTypes.bool.isRequired,
         index: PropTypes.number.isRequired,
@@ -45,7 +44,7 @@ class Tab extends React.Component {
         return (
             <li className={c} onClick={!disabled ? changeTab.bind(this, index) : null}>
                 <a>
-                    {title.indexOf(".") > 0 ? <Translate className="tab-title" content={title} /> : <span className="tab-title">{title}</span>}
+                    {typeof title === "string" && title.indexOf(".") > 0 ? <Translate className="tab-title" content={title} /> : <span className="tab-title">{title}</span>}
                     {this.props.subText ? <div className="tab-subtext">{this.props.subText}</div> : null}
                 </a>
             </li>
diff --git a/app/components/Utility/TranslateWithLinks.jsx b/app/components/Utility/TranslateWithLinks.jsx
index bf74caacff..6c02b82ce2 100644
--- a/app/components/Utility/TranslateWithLinks.jsx
+++ b/app/components/Utility/TranslateWithLinks.jsx
@@ -6,6 +6,7 @@ import LinkToAssetById from "../Blockchain/LinkToAssetById";
 import {Link} from "react-router/es";
 import FormattedAsset from "../Utility/FormattedAsset";
 import FormattedPrice from "../Utility/FormattedPrice";
+import AssetName from "../Utility/AssetName";
 
 /**
  *  Given a string and a list of interpolation parameters, this component
@@ -41,17 +42,19 @@ export default class TranslateWithLinks extends React.Component {
     }
 
     linkToAccount(name_or_id) {
+        const {noLink} = this.props;
         if(!name_or_id) return <span>-</span>;
         return utils.is_object_id(name_or_id) ?
-            <LinkToAccountById account={name_or_id}/> :
+            <LinkToAccountById account={name_or_id} noLink/> : noLink ? <span>{name_or_id}</span> :
             <Link to={`/account/${name_or_id}/overview`}>{name_or_id}</Link>;
     }
 
     linkToAsset(symbol_or_id) {
+        const {noLink} = this.props;
         if(!symbol_or_id) return <span>-</span>;
         return utils.is_object_id(symbol_or_id) ?
-            <LinkToAssetById asset={symbol_or_id}/> :
-            <Link to={`/asset/${symbol_or_id}`}>{symbol_or_id}</Link>;
+            <LinkToAssetById asset={symbol_or_id} noLink/> : noLink ? <AssetName name={symbol_or_id} noTip /> :
+            <Link to={`/asset/${symbol_or_id}`}><AssetName name={symbol_or_id} noTip /></Link>;
     }
 
     render() {

From 7e2a55377bcbffaea9bf07aca12fbbcf50d3a102 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 14:34:58 +0200
Subject: [PATCH 20/82] Fix TranslateWithLinks noLink propagation

---
 app/components/Utility/TranslateWithLinks.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Utility/TranslateWithLinks.jsx b/app/components/Utility/TranslateWithLinks.jsx
index 6c02b82ce2..9b6ff012c9 100644
--- a/app/components/Utility/TranslateWithLinks.jsx
+++ b/app/components/Utility/TranslateWithLinks.jsx
@@ -45,7 +45,7 @@ export default class TranslateWithLinks extends React.Component {
         const {noLink} = this.props;
         if(!name_or_id) return <span>-</span>;
         return utils.is_object_id(name_or_id) ?
-            <LinkToAccountById account={name_or_id} noLink/> : noLink ? <span>{name_or_id}</span> :
+            <LinkToAccountById account={name_or_id} noLink={noLink} /> : noLink ? <span>{name_or_id}</span> :
             <Link to={`/account/${name_or_id}/overview`}>{name_or_id}</Link>;
     }
 
@@ -53,7 +53,7 @@ export default class TranslateWithLinks extends React.Component {
         const {noLink} = this.props;
         if(!symbol_or_id) return <span>-</span>;
         return utils.is_object_id(symbol_or_id) ?
-            <LinkToAssetById asset={symbol_or_id} noLink/> : noLink ? <AssetName name={symbol_or_id} noTip /> :
+            <LinkToAssetById asset={symbol_or_id} noLink={noLink} /> : noLink ? <AssetName name={symbol_or_id} noTip /> :
             <Link to={`/asset/${symbol_or_id}`}><AssetName name={symbol_or_id} noTip /></Link>;
     }
 

From 81300b308fe656eaa9da629bb8cdf8f8d8f13d8b Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 4 Oct 2017 14:58:43 +0200
Subject: [PATCH 21/82] Add 5px padding to Active/Hidden container

---
 app/assets/stylesheets/components/_account.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index d73e19a36e..c20e0d449d 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -115,6 +115,7 @@ div.overview-tabs {
     }
 
     div.hide-selector {
+        padding-left: 5px;
         padding-bottom: 10px;
         > div {
             font-size: 1.15rem;

From c0549793a4cd113b5d1a0eecafef03652789f973 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 5 Oct 2017 13:55:53 +0200
Subject: [PATCH 22/82] Add Proposal tab to table view, fix some style issues

---
 app/assets/locales/locale-en.json             |  2 +-
 app/components/Account/AccountOverview.jsx    | 20 +++++++++----------
 app/components/Account/Proposals.jsx          |  2 +-
 app/components/Account/RecentTransactions.jsx | 11 +++++-----
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 4ad135b29a..7abac961e9 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -346,7 +346,7 @@
     },
     "collaterals": "Margin Positions",
     "eq_value": "Estimated",
-    "no_price": "Unknown value",
+    "no_price": "--",
     "percent": "Percent of total supply",
     "please_create_account": "Please create an account",
     "create_account": "Create account",
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 6527899fc3..b9a2375d92 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -340,9 +340,9 @@ class AccountOverview extends React.Component {
                 }
             });
 
-            if (balances.length !== currentIndex) {
-                balances.splice(currentIndex + 1, 0, <tr style={{backgroundColor: "transparent"}} key={"hidden_" + currentIndex} ><td style={{height: 20}} colSpan="11"></td></tr>);
-            }
+            // if (balances.length !== currentIndex) {
+            //     balances.splice(currentIndex + 1, 0, <tr style={{backgroundColor: "transparent"}} key={"hidden_" + currentIndex} ><td style={{height: 20}} colSpan="11"></td></tr>);
+            // }
         }
 
         function sortAlphabetic(a, b) {
@@ -607,6 +607,12 @@ class AccountOverview extends React.Component {
                                     dashboard
                                 />
                             </Tab>
+
+                            {account.get("proposals") && account.get("proposals").size ?
+                            <Tab title="explorer.proposals.title" subText={account.get("proposals") ? account.get("proposals").size : 0}>
+
+                                    <Proposals className="dashboard-table" account={account.get("id")}/>
+                            </Tab> : null}
                         </Tabs>
 
 
@@ -615,14 +621,6 @@ class AccountOverview extends React.Component {
                     </div>
                 </div>
 
-                {account.get("proposals") && account.get("proposals").size ?
-                <div className="content-block">
-                    <div className="block-content-header">
-                        <Translate content="explorer.proposals.title" account={account.get("id")} />
-                    </div>
-                    <Proposals account={account.get("id")}/>
-                </div> : null}
-
                 {/* Deposit Modal */}
                 <SimpleDepositWithdraw
                     ref="deposit_modal"
diff --git a/app/components/Account/Proposals.jsx b/app/components/Account/Proposals.jsx
index 4b19942e7f..d84d1d4cb6 100644
--- a/app/components/Account/Proposals.jsx
+++ b/app/components/Account/Proposals.jsx
@@ -132,7 +132,7 @@ class Proposals extends Component {
             });
 
         return (
-            <table className={"table compact"}>
+            <table className={"table compact " + this.props.className}>
                 <thead>
                 <tr>
                     <th><Translate content="account.votes.info" /></th>
diff --git a/app/components/Account/RecentTransactions.jsx b/app/components/Account/RecentTransactions.jsx
index 52c7143b69..c6c970e80a 100644
--- a/app/components/Account/RecentTransactions.jsx
+++ b/app/components/Account/RecentTransactions.jsx
@@ -213,10 +213,7 @@ class RecentTransactions extends React.Component {
             }) : [<tr key="no_recent"><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>];
         display_history.push(
             <tr className="total-value" key="total_value">
-                <td style={alignLeft}>
-                    {this.props.showFilters ? (
-                        <select data-place="left" data-tip={counterpart.translate("tooltip.filter_ops")} style={{paddingTop: 5}} className="bts-select no-margin" value={this.state.filter} onChange={this._onChangeFilter.bind(this)}>{options}</select>
-                    ) : null}
+                <td>
                 </td>
                 <td style={alignRight}>
                     {historyCount > 0 ?
@@ -261,7 +258,11 @@ class RecentTransactions extends React.Component {
                         <table className={"table" + (compactView ? " compact" : "") + (this.props.dashboard ? " dashboard-table" : "")}>
                             <thead>
                                 <tr>
-                                    {compactView ? null : <th style={alignLeft} className="column-hide-tiny"><Translate content="explorer.block.op" /></th>}
+                                    {compactView ? null : <th style={alignLeft} className="column-hide-tiny">
+                                        {this.props.showFilters ? (
+                                            <select data-place="left" data-tip={counterpart.translate("tooltip.filter_ops")} style={{paddingTop: 5, width: "auto"}} className="bts-select no-margin" value={this.state.filter} onChange={this._onChangeFilter.bind(this)}>{options}</select>
+                                        ) : null}
+                                    </th>}
                                     <th style={alignLeft}><Translate content="account.votes.info" /></th>
                                     <th></th>
                                 </tr>

From 006560736adfb87bdd2f15b9cef8ee1d8014de1b Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 5 Oct 2017 14:15:21 +0200
Subject: [PATCH 23/82] Move some utility components

---
 app/assets/locales/locale-en.json                |  3 ++-
 app/components/Account/AccountOverview.jsx       |  7 +++++--
 app/components/Account/AccountVotingProxy.jsx    |  2 +-
 app/components/Account/AccountWhitelist.jsx      |  2 +-
 app/components/Account/NestedApprovalState.jsx   |  2 +-
 app/components/Account/VotingAccountsList.jsx    |  2 +-
 app/components/Account/WorkerApproval.jsx        |  2 +-
 app/components/Blockchain/Asset.jsx              |  2 +-
 app/components/Blockchain/Block.jsx              |  2 +-
 app/components/Blockchain/Operation.jsx          |  4 ++--
 app/components/Blockchain/ProposedOperation.jsx  | 16 +++++++++++-----
 app/components/Blockchain/Transaction.jsx        |  4 ++--
 .../BlockTradesGatewayDepositRequest.jsx         |  2 +-
 app/components/Explorer/Assets.jsx               |  2 +-
 app/components/Explorer/Blocks.jsx               |  2 +-
 .../LinkToAccountById.jsx                        |  4 ++--
 .../{Blockchain => Utility}/LinkToAssetById.jsx  |  6 +++---
 .../LinkToWitnessById.jsx                        |  0
 app/components/Utility/TranslateWithLinks.jsx    |  4 ++--
 19 files changed, 39 insertions(+), 29 deletions(-)
 rename app/components/{Blockchain => Utility}/LinkToAccountById.jsx (90%)
 rename app/components/{Blockchain => Utility}/LinkToAssetById.jsx (75%)
 rename app/components/{Blockchain => Utility}/LinkToWitnessById.jsx (100%)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 7abac961e9..0efbde5686 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -475,7 +475,8 @@
     "asset_issue": "Issue {amount} to {to} using {account}",
     "asset_reserve": "Reserve (burn) {amount} using {account}",
     "vesting_balance_withdraw": "Withdraw {amount} from vesting balance of {account}",
-    "feed_producer": "Update the feed producers for the asset {asset} using the account {account}"
+    "feed_producer": "Update the feed producers for the asset {asset} using the account {account}",
+    "call_order_update": "Change {account} {debtSymbol} debt by {debt} and collateral by {collateral}"
   },
   "transaction": {
     "confirm": "Please confirm the transaction",
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index b9a2375d92..313b5c6802 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -18,6 +18,7 @@ import {Link} from "react-router/es";
 import ChainTypes from "../Utility/ChainTypes";
 import FormattedAsset from "../Utility/FormattedAsset";
 import BindToChainState from "../Utility/BindToChainState";
+import LinkToAssetById from "../Utility/LinkToAssetById";
 import utils from "common/utils";
 import BorrowModal from "../Modal/BorrowModal";
 import ReactTooltip from "react-tooltip";
@@ -207,7 +208,9 @@ class AccountOverview extends React.Component {
             }
             balances.push(
                 <tr key={asset.get("symbol")} style={{maxWidth: "100rem"}}>
-                    <td><AssetName name={asset.get("symbol")} /></td>
+                    <td>
+                        <LinkToAssetById asset={asset.get("id")} />
+                    </td>
                     <td style={{textAlign: "right"}}>
                         {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} hide_asset /> : null}
                     </td>
@@ -300,7 +303,7 @@ class AccountOverview extends React.Component {
                     if (includeAsset && visible || !includeAsset && !visible) balances.push(
                         <tr key={"zz" + a} style={{maxWidth: "100rem"}}>
                             <td>
-                                <AssetName name={a} />
+                                <LinkToAssetById asset={asset.get("id")} />
                             </td>
                             <td colSpan="3"></td>
                             <td style={{textAlign: "center"}}>
diff --git a/app/components/Account/AccountVotingProxy.jsx b/app/components/Account/AccountVotingProxy.jsx
index 0e9831e814..5fdf22bdd3 100644
--- a/app/components/Account/AccountVotingProxy.jsx
+++ b/app/components/Account/AccountVotingProxy.jsx
@@ -5,7 +5,7 @@ import BindToChainState from "../Utility/BindToChainState";
 import ChainTypes from "../Utility/ChainTypes";
 import Translate from "react-translate-component";
 import AccountImage from "../Account/AccountImage";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import {List} from "immutable";
 
 class AccountVotingProxy extends React.Component {
diff --git a/app/components/Account/AccountWhitelist.jsx b/app/components/Account/AccountWhitelist.jsx
index 0348910779..10f21b99c8 100644
--- a/app/components/Account/AccountWhitelist.jsx
+++ b/app/components/Account/AccountWhitelist.jsx
@@ -6,7 +6,7 @@ import Immutable from "immutable";
 import Translate from "react-translate-component";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import WalletApi from "api/WalletApi";
 import WalletDb from "stores/WalletDb.js";
 
diff --git a/app/components/Account/NestedApprovalState.jsx b/app/components/Account/NestedApprovalState.jsx
index 4f5946a9ea..b43c90d687 100644
--- a/app/components/Account/NestedApprovalState.jsx
+++ b/app/components/Account/NestedApprovalState.jsx
@@ -3,7 +3,7 @@ import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
 import utils from "common/utils";
 import Icon from "../Icon/Icon";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import pu from "common/permission_utils";
 import {cloneDeep} from "lodash";
 import {ChainStore} from "bitsharesjs/es";
diff --git a/app/components/Account/VotingAccountsList.jsx b/app/components/Account/VotingAccountsList.jsx
index a85d281c90..0c1b27c9ea 100644
--- a/app/components/Account/VotingAccountsList.jsx
+++ b/app/components/Account/VotingAccountsList.jsx
@@ -6,7 +6,7 @@ import {ChainStore} from "bitsharesjs/es";
 import ChainTypes from "../Utility/ChainTypes";
 import FormattedAsset from "../Utility/FormattedAsset";
 import BindToChainState from "../Utility/BindToChainState";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import counterpart from "counterpart";
 
 function getWitnessOrCommittee(type, acct) {
diff --git a/app/components/Account/WorkerApproval.jsx b/app/components/Account/WorkerApproval.jsx
index 360123f5e5..4e583c646e 100644
--- a/app/components/Account/WorkerApproval.jsx
+++ b/app/components/Account/WorkerApproval.jsx
@@ -5,7 +5,7 @@ import utils from "common/utils";
 import ChainTypes from "../Utility/ChainTypes";
 import FormattedAsset from "../Utility/FormattedAsset";
 import VestingBalance from "../Utility/VestingBalance";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import BindToChainState from "../Utility/BindToChainState";
 import {EquivalentValueComponent} from "../Utility/EquivalentValueComponent";
 import Icon from "components/Icon/Icon";
diff --git a/app/components/Blockchain/Asset.jsx b/app/components/Blockchain/Asset.jsx
index 62de1e7c4a..28500b4094 100644
--- a/app/components/Blockchain/Asset.jsx
+++ b/app/components/Blockchain/Asset.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Link} from "react-router/es";
 import Translate from "react-translate-component";
-import LinkToAccountById from "./LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
 import FormattedAsset from "../Utility/FormattedAsset";
diff --git a/app/components/Blockchain/Block.jsx b/app/components/Blockchain/Block.jsx
index 79a50e9146..4e4a1e7cc3 100644
--- a/app/components/Blockchain/Block.jsx
+++ b/app/components/Blockchain/Block.jsx
@@ -7,7 +7,7 @@ import Transaction from "./Transaction";
 import Translate from "react-translate-component";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
-import LinkToWitnessById from "./LinkToWitnessById";
+import LinkToWitnessById from "../Utility/LinkToWitnessById";
 
 class TransactionList extends React.Component {
 
diff --git a/app/components/Blockchain/Operation.jsx b/app/components/Blockchain/Operation.jsx
index 7973050970..6b19af07cc 100644
--- a/app/components/Blockchain/Operation.jsx
+++ b/app/components/Blockchain/Operation.jsx
@@ -6,8 +6,8 @@ import Translate from "react-translate-component";
 import counterpart from "counterpart";
 import utils from "common/utils";
 import BlockTime from "./BlockTime";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
-import LinkToAssetById from "../Blockchain/LinkToAssetById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
+import LinkToAssetById from "../Utility/LinkToAssetById";
 import BindToChainState from "../Utility/BindToChainState";
 import ChainTypes from "../Utility/ChainTypes";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
diff --git a/app/components/Blockchain/ProposedOperation.jsx b/app/components/Blockchain/ProposedOperation.jsx
index 0eac7a957c..990cf5f64e 100644
--- a/app/components/Blockchain/ProposedOperation.jsx
+++ b/app/components/Blockchain/ProposedOperation.jsx
@@ -6,8 +6,8 @@ import Translate from "react-translate-component";
 import counterpart from "counterpart";
 import market_utils from "common/market_utils";
 import utils from "common/utils";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
-import LinkToAssetById from "../Blockchain/LinkToAssetById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
+import LinkToAssetById from "../Utility/LinkToAssetById";
 import BindToChainState from "../Utility/BindToChainState";
 import FormattedPrice from "../Utility/FormattedPrice";
 import {ChainStore, ChainTypes as grapheneChainTypes} from "bitsharesjs/es";
@@ -203,9 +203,15 @@ class ProposedOperation extends React.Component {
                 color = "warning";
                 column = (
                     <span>
-                        {this.linkToAccount(op[1].funding_account)}&nbsp;
-                        <Translate component="span" content="proposal.call_order_update" />
-                        &nbsp;{this.linkToAsset(op[1].delta_debt.asset_id)}
+                        <TranslateWithLinks
+                            string="proposal.call_order_update"
+                            keys={[
+                                {type: "account", value: op[1].funding_account, arg: "account"},
+                                {type: "asset", value: op[1].delta_debt.asset_id, arg: "debtSymbol"},
+                                {type: "amount", value: op[1].delta_debt, arg: "debt"},
+                                {type: "amount", value: op[1].delta_collateral, arg: "collateral"}
+                            ]}
+                        />
                     </span>
                 );
                 break;
diff --git a/app/components/Blockchain/Transaction.jsx b/app/components/Blockchain/Transaction.jsx
index 33a6f08704..28ac3b8dd2 100644
--- a/app/components/Blockchain/Transaction.jsx
+++ b/app/components/Blockchain/Transaction.jsx
@@ -8,8 +8,8 @@ import classNames from "classnames";
 import {FormattedDate} from "react-intl";
 import Inspector from "react-json-inspector";
 import utils from "common/utils";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
-import LinkToAssetById from "../Blockchain/LinkToAssetById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
+import LinkToAssetById from "../Utility/LinkToAssetById";
 import FormattedPrice from "../Utility/FormattedPrice";
 import account_constants from "chain/account_constants";
 import Icon from "../Icon/Icon";
diff --git a/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx b/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
index f2d2a788b8..abbc926407 100644
--- a/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
+++ b/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
@@ -10,7 +10,7 @@ import ZfApi from "react-foundation-apps/src/utils/foundation-api";
 import AccountBalance from "../../Account/AccountBalance";
 import BlockTradesDepositAddressCache from "common/BlockTradesDepositAddressCache";
 import AssetName from "components/Utility/AssetName";
-import LinkToAccountById from "components/Blockchain/LinkToAccountById";
+import LinkToAccountById from "components/Utility/LinkToAccountById";
 import {requestDepositAddress} from "common/blockTradesMethods";
 import { blockTradesAPIs } from "api/apiConfig";
 
diff --git a/app/components/Explorer/Assets.jsx b/app/components/Explorer/Assets.jsx
index d73403629b..ea5f2dbea2 100644
--- a/app/components/Explorer/Assets.jsx
+++ b/app/components/Explorer/Assets.jsx
@@ -5,7 +5,7 @@ import SettingsActions from "actions/SettingsActions";
 import {Link} from "react-router/es";
 import Immutable from "immutable";
 import Translate from "react-translate-component";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
 import assetUtils from "common/asset_utils";
 import counterpart from "counterpart";
 import FormattedAsset from "../Utility/FormattedAsset";
diff --git a/app/components/Explorer/Blocks.jsx b/app/components/Explorer/Blocks.jsx
index b26aaeed20..1f3fe49333 100644
--- a/app/components/Explorer/Blocks.jsx
+++ b/app/components/Explorer/Blocks.jsx
@@ -4,7 +4,7 @@ import BlockchainActions from "actions/BlockchainActions";
 import Translate from "react-translate-component";
 import {FormattedDate} from "react-intl";
 import Operation from "../Blockchain/Operation";
-import LinkToWitnessById from "../Blockchain/LinkToWitnessById";
+import LinkToWitnessById from "../Utility/LinkToWitnessById";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
 import TransactionChart from "./TransactionChart";
diff --git a/app/components/Blockchain/LinkToAccountById.jsx b/app/components/Utility/LinkToAccountById.jsx
similarity index 90%
rename from app/components/Blockchain/LinkToAccountById.jsx
rename to app/components/Utility/LinkToAccountById.jsx
index e29bbd87ad..3196745c79 100644
--- a/app/components/Blockchain/LinkToAccountById.jsx
+++ b/app/components/Utility/LinkToAccountById.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Link} from "react-router/es";
-import ChainTypes from "../Utility/ChainTypes";
-import BindToChainState from "../Utility/BindToChainState";
+import ChainTypes from "./ChainTypes";
+import BindToChainState from "./BindToChainState";
 
 class LinkToAccountById extends React.Component {
 
diff --git a/app/components/Blockchain/LinkToAssetById.jsx b/app/components/Utility/LinkToAssetById.jsx
similarity index 75%
rename from app/components/Blockchain/LinkToAssetById.jsx
rename to app/components/Utility/LinkToAssetById.jsx
index b28c6894e1..5a5986f37e 100644
--- a/app/components/Blockchain/LinkToAssetById.jsx
+++ b/app/components/Utility/LinkToAssetById.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import {Link} from "react-router/es";
-import ChainTypes from "../Utility/ChainTypes";
-import BindToChainState from "../Utility/BindToChainState";
-import AssetName from "../Utility/AssetName";
+import ChainTypes from "./ChainTypes";
+import BindToChainState from "./BindToChainState";
+import AssetName from "./AssetName";
 
 class LinkToAssetById extends React.Component {
     static propTypes = {
diff --git a/app/components/Blockchain/LinkToWitnessById.jsx b/app/components/Utility/LinkToWitnessById.jsx
similarity index 100%
rename from app/components/Blockchain/LinkToWitnessById.jsx
rename to app/components/Utility/LinkToWitnessById.jsx
diff --git a/app/components/Utility/TranslateWithLinks.jsx b/app/components/Utility/TranslateWithLinks.jsx
index 9b6ff012c9..8e4ff0fad8 100644
--- a/app/components/Utility/TranslateWithLinks.jsx
+++ b/app/components/Utility/TranslateWithLinks.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import counterpart from "counterpart";
 import utils from "common/utils";
-import LinkToAccountById from "../Blockchain/LinkToAccountById";
-import LinkToAssetById from "../Blockchain/LinkToAssetById";
+import LinkToAccountById from "../Utility/LinkToAccountById";
+import LinkToAssetById from "../Utility/LinkToAssetById";
 import {Link} from "react-router/es";
 import FormattedAsset from "../Utility/FormattedAsset";
 import FormattedPrice from "../Utility/FormattedPrice";

From 4eebbc7d1906d5286274c2341a6a600208af2fa1 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 6 Oct 2017 10:02:37 +0200
Subject: [PATCH 24/82] Update react-intl

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2474838dba..c045f94dfe 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,7 @@
     "react-highcharts": "^12.0.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-interpolate-component": "^0.10.0",
-    "react-intl": "^2.2.2",
+    "react-intl": "^2.4.0",
     "react-json-inspector": "^7.0.0",
     "react-notification-system": "^0.2.12",
     "react-popover": "^0.4.6",

From 7f3e044e7e21558d37a91e7b6005c0977e747995 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 6 Oct 2017 10:05:38 +0200
Subject: [PATCH 25/82] Add price column to portfolio, refactor market stats
 checking for reuse

---
 app/components/Account/AccountOverview.jsx    |   7 +-
 app/components/Utility/EquivalentPrice.jsx    | 193 ++++++++++++++++++
 .../Utility/EquivalentValueComponent.jsx      |  57 ++----
 app/components/Utility/FormattedAsset.jsx     |   2 +-
 app/components/Utility/FormattedPrice.jsx     |  17 +-
 app/components/Utility/TotalBalanceValue.jsx  |  84 ++------
 app/lib/common/MarketClasses.js               |  16 ++
 7 files changed, 261 insertions(+), 115 deletions(-)
 create mode 100644 app/components/Utility/EquivalentPrice.jsx

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 313b5c6802..337a8ce6cf 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -17,6 +17,7 @@ import Icon from "../Icon/Icon";
 import {Link} from "react-router/es";
 import ChainTypes from "../Utility/ChainTypes";
 import FormattedAsset from "../Utility/FormattedAsset";
+import EquivalentPrice from "../Utility/EquivalentPrice";
 import BindToChainState from "../Utility/BindToChainState";
 import LinkToAssetById from "../Utility/LinkToAssetById";
 import utils from "common/utils";
@@ -214,6 +215,7 @@ class AccountOverview extends React.Component {
                     <td style={{textAlign: "right"}}>
                         {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} hide_asset /> : null}
                     </td>
+                    <td style={{textAlign: "right"}}><EquivalentPrice fromAsset={asset.get("id")} hide_symbols/></td>
                     <td style={{textAlign: "right"}} className="column-hide-small">
                         {hasBalance || hasOnOrder ? <BalanceValueComponent balance={balance} toAsset={preferredUnit} hide_asset/> : null}
                     </td>
@@ -305,7 +307,7 @@ class AccountOverview extends React.Component {
                             <td>
                                 <LinkToAssetById asset={asset.get("id")} />
                             </td>
-                            <td colSpan="3"></td>
+                            <td colSpan="4"></td>
                             <td style={{textAlign: "center"}}>
                                 {canBuy  && this.props.isMyAccount ?
                                 <span>
@@ -486,7 +488,7 @@ class AccountOverview extends React.Component {
             ]}
         />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="9"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -533,6 +535,7 @@ class AccountOverview extends React.Component {
                                             {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
                                             <th><Translate component="span" content="account.asset" /></th>
                                             <th style={{textAlign: "right"}}><Translate content="account.qty" /></th>
+                                            <th style={{textAlign: "right"}}><Translate content="exchange.price" /> (<AssetName name={preferredUnit} />)</th>
                                             {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
                                             <th style={{textAlign: "right"}} className="column-hide-small">
                                                 <TranslateWithLinks
diff --git a/app/components/Utility/EquivalentPrice.jsx b/app/components/Utility/EquivalentPrice.jsx
new file mode 100644
index 0000000000..72b86ea053
--- /dev/null
+++ b/app/components/Utility/EquivalentPrice.jsx
@@ -0,0 +1,193 @@
+import React from "react";
+import utils from "common/utils";
+import ChainTypes from "./ChainTypes";
+import BindToChainState from "./BindToChainState";
+import AltContainer from "alt-container";
+import SettingsStore from "stores/SettingsStore";
+import FormattedPrice from "./FormattedPrice";
+import MarketsActions from "actions/MarketsActions";
+import MarketsStore from "stores/MarketsStore";
+import Immutable from "immutable";
+
+export class MarketStatsCheck extends React.Component {
+
+    constructor() {
+        super();
+
+        this.fromStatsIntervals = {};
+        this.toStatsInterval = null;
+    }
+
+    _checkStats(newStats = {close: {}}, oldStats = {close: {}}) {
+        return (
+            newStats.volumeBase !== oldStats.volumeBase ||
+            !utils.are_equal_shallow(newStats.close && newStats.close.base, oldStats.close && oldStats.close.base) ||
+            !utils.are_equal_shallow(newStats.close && newStats.close.quote, oldStats.close && oldStats.close.quote)
+        );
+    }
+
+    componentWillMount() {
+        this._startUpdates(this.props);
+    }
+
+    componentWillReceiveProps(np) {
+        if (!Immutable.is(np.toAsset, this.props.toAsset)) {
+            this._stopUpdates();
+
+            this._startUpdates(np);
+        }
+    }
+
+    _startUpdates(props) {
+        let {coreAsset, fromAssets, fromAsset} = props;
+        if (coreAsset) {
+            if (!fromAssets && fromAsset) fromAssets = [fromAsset];
+
+            // From assets
+            fromAssets.forEach(asset => {
+                if (asset && asset.get("id") !== coreAsset.get("id")) {
+                    setTimeout(() => {
+                        MarketsActions.getMarketStats(coreAsset, asset);
+                        this.fromStatsIntervals[asset.get("id")] = setInterval(MarketsActions.getMarketStats.bind(this, coreAsset, asset), 5 * 60 * 1000);
+                    }, 50);
+                }
+            });
+
+            if (props.toAsset.get("id") !== coreAsset.get("id")) {
+                // wrap this in a timeout to prevent dispatch in the middle of a dispatch
+                MarketsActions.getMarketStats.defer(coreAsset, props.toAsset);
+                this.toStatsInterval = setInterval(() => {
+                    MarketsActions.getMarketStats.defer(coreAsset, props.toAsset);
+                }, 5 * 60 * 1000);
+            }
+        }
+    }
+
+    _stopUpdates() {
+        for (let key in this.fromStatsIntervals) {
+            clearInterval(this.fromStatsIntervals[key]);
+        }
+        clearInterval(this.toStatsInterval);
+    }
+
+    componentWillUnmount() {
+        this._stopUpdates();
+    }
+
+    shouldComponentUpdate(np) {
+        let {fromAsset, fromAssets} = this.props;
+        const toMarket = np.toAsset.get("symbol") + "_" + np.coreAsset.get("symbol");
+        if (!fromAssets && fromAsset) fromAssets = [fromAsset];
+        const fromMarkets = fromAssets.map(asset => {
+            if (!asset) return null;
+            return asset.get("symbol") + "_" + np.coreAsset.get("symbol");
+        }).filter(a => !!a);
+
+        const fromCheck = fromMarkets.reduce((a, b) => {
+            return a || this._checkStats(np.marketStats.get(b), this.props.marketStats.get(b));
+        }, false);
+
+        return (
+            this._checkStats(np.marketStats.get(toMarket), this.props.marketStats.get(toMarket)) ||
+            fromCheck
+        );
+    }
+}
+
+class EquivalentPrice extends MarketStatsCheck {
+
+    static propTypes = {
+        toAsset: ChainTypes.ChainAsset.isRequired,
+        fromAsset: ChainTypes.ChainAsset.isRequired,
+        coreAsset: ChainTypes.ChainAsset.isRequired
+    };
+
+    static defaultProps = {
+        toAsset: "1.3.0",
+        coreAsset: "1.3.0"
+    }
+
+    constructor(props) {
+        super(props);
+    }
+
+    shouldComponentUpdate(np, nextState) {
+        return (
+            super.shouldComponentUpdate(np) ||
+            np.base_amount !== this.props.base_amount ||
+            np.quote_amount !== this.props.quote_amount ||
+            np.decimals !== this.props.decimals ||
+            !utils.are_equal_shallow(nextState, this.state)
+        );
+    }
+
+
+    render() {
+        const {coreAsset, fromAsset, toAsset, marketStats, ...others} = this.props;
+        const toMarket = toAsset.get("symbol") + "_" + coreAsset.get("symbol");
+        const fromMarket = fromAsset.get("symbol") + "_" + coreAsset.get("symbol");
+        let toPrice, fromPrice;
+        if (marketStats.get(fromMarket) && marketStats.get(fromMarket).price) {
+            fromPrice = marketStats.get(fromMarket).price.clone();
+        }
+        if (marketStats.get(toMarket) && marketStats.get(toMarket).price) {
+            toPrice = marketStats.get(toMarket).price.clone();
+        }
+
+        if (toAsset.get("id") === fromAsset.get("id")) {
+            return <span>--</span>;
+        }
+        let finalPrice;
+        if (toPrice && fromPrice) {
+            finalPrice = toPrice.times(fromPrice);
+        } else if (toPrice) {
+            finalPrice = toPrice;
+        } else  if (fromPrice) {
+            finalPrice = fromPrice;
+        }
+        if (!finalPrice) return <span>--</span>;
+        const finalId = finalPrice.base.asset_id + "_" + finalPrice.quote.asset_id;
+        if (
+            finalId.indexOf(toAsset.get("id")) !== -1 &&
+            finalId.indexOf(fromAsset.get("id")) !== -1
+        ) {
+            return (
+                <FormattedPrice
+                    force_direction={toAsset.get("symbol")}
+                    base_amount={finalPrice.base.amount}
+                    base_asset={finalPrice.base.asset_id}
+                    quote_amount={finalPrice.quote.amount}
+                    quote_asset={finalPrice.quote.asset_id}
+                    {...others}
+                />
+            );
+        } else {
+            return <span>--</span>;
+        }
+    }
+}
+
+EquivalentPrice = BindToChainState(EquivalentPrice);
+
+export default class EquivalentPriceWrapper extends React.Component {
+
+    render() {
+        return (
+          <AltContainer
+            stores={[SettingsStore, MarketsStore]}
+            inject={{
+                toAsset: () => {
+                    return SettingsStore.getState().settings.get("unit", "1.3.0");
+                },
+                marketStats: () => {
+                    return MarketsStore.getState().allMarketStats;
+                }
+            }}
+          >
+            <EquivalentPrice
+                {...this.props}
+            />
+          </AltContainer>
+        );
+    }
+}
diff --git a/app/components/Utility/EquivalentValueComponent.jsx b/app/components/Utility/EquivalentValueComponent.jsx
index 5bfdc1e901..75dc93135c 100644
--- a/app/components/Utility/EquivalentValueComponent.jsx
+++ b/app/components/Utility/EquivalentValueComponent.jsx
@@ -3,13 +3,12 @@ import FormattedAsset from "./FormattedAsset";
 import ChainTypes from "./ChainTypes";
 import BindToChainState from "./BindToChainState";
 import utils from "common/utils";
-import MarketsActions from "actions/MarketsActions";
-import {ChainStore} from "bitsharesjs/es";
 import { connect } from "alt-react";
 import MarketsStore from "stores/MarketsStore";
 import Translate from "react-translate-component";
 import counterpart from "counterpart";
 import ReactTooltip from "react-tooltip";
+import {MarketStatsCheck} from "../Utility/EquivalentPrice";
 
 /**
  *  Given an asset amount, displays the equivalent value in baseAsset if possible
@@ -21,58 +20,41 @@ import ReactTooltip from "react-tooltip";
  *  -'fullPrecision' boolean to tell if the amount uses the full precision of the asset
  */
 
-class ValueComponent extends React.Component {
+class ValueComponent extends MarketStatsCheck {
 
     static propTypes = {
         toAsset: ChainTypes.ChainAsset.isRequired,
-        fromAsset: ChainTypes.ChainAsset.isRequired
+        fromAsset: ChainTypes.ChainAsset.isRequired,
+        coreAsset: ChainTypes.ChainAsset.isRequired
     };
 
     static defaultProps = {
         toAsset: "1.3.0",
         fullPrecision: true,
         noDecimals: false,
-        hide_asset: false
+        hide_asset: false,
+        coreAsset: "1.3.0"
     };
 
-    constructor() {
-        super();
-
-        this.fromStatsInterval = null;
-        this.toStatsInterval = null;
-    }
-
-    componentWillMount() {
-        let coreAsset = ChainStore.getAsset("1.3.0");
-        if (coreAsset) {
-            if (this.props.fromAsset.get("id") !== coreAsset.get("id")) {
-                MarketsActions.getMarketStats(coreAsset, this.props.fromAsset);
-                this.fromStatsInterval = setInterval(MarketsActions.getMarketStats.bind(this, coreAsset, this.props.fromAsset), 5 * 60 * 1000);
-            }
-
-            if (this.props.toAsset.get("id") !== coreAsset.get("id")) {
-                // wrap this in a timeout to prevent dispatch in the middle of a dispatch
-                // MarketsActions.getMarketStats.bind(this, this.props.toAsset, coreAsset);
-                MarketsActions.getMarketStats.defer(coreAsset, this.props.toAsset);
-                this.toStatsInterval = setInterval(() => {
-                    MarketsActions.getMarketStats.defer(coreAsset, this.props.toAsset);
-                }, 5 * 60 * 1000);
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.fromStatsInterval);
-        clearInterval(this.toStatsInterval);
+    constructor(props) {
+        super(props);
     }
 
     componentDidMount() {
         ReactTooltip.rebuild();
     }
 
+    shouldComponentUpdate(np) {
+        return (
+            super.shouldComponentUpdate(np) ||
+            np.toAsset !== this.props.toAsset ||
+            np.fromAsset !== this.props.fromAsset ||
+            np.amount !== this.props.amount
+        );
+    }
+
     getValue() {
-        let {amount, toAsset, fromAsset, fullPrecision, marketStats} = this.props;
-        let coreAsset = ChainStore.getAsset("1.3.0");
+        let {amount, toAsset, fromAsset, coreAsset, fullPrecision, marketStats} = this.props;
         let toStats, fromStats;
 
         let toID = toAsset.get("id");
@@ -97,8 +79,7 @@ class ValueComponent extends React.Component {
     }
 
     render() {
-        let {amount, toAsset, fromAsset, fullPrecision, marketStats} = this.props;
-        let coreAsset = ChainStore.getAsset("1.3.0");
+        let {amount, toAsset, fromAsset, fullPrecision, marketStats, coreAsset} = this.props;
         let toStats, fromStats;
 
         let toID = toAsset.get("id");
diff --git a/app/components/Utility/FormattedAsset.jsx b/app/components/Utility/FormattedAsset.jsx
index 3fa33e5044..f604927559 100755
--- a/app/components/Utility/FormattedAsset.jsx
+++ b/app/components/Utility/FormattedAsset.jsx
@@ -105,7 +105,7 @@ class FormattedAsset extends React.Component {
                 {!hide_amount ?
                     <FormattedNumber
                         value={this.props.exact_amount ? amount : amount / precision}
-                        minimumFractionDigits={2}
+                        minimumFractionDigits={Math.max(decimals, 2)}
                         maximumFractionDigits={Math.max(decimals, 2)}
                     />
                 : null}
diff --git a/app/components/Utility/FormattedPrice.jsx b/app/components/Utility/FormattedPrice.jsx
index 6dbf9a5eb1..c543eaf4ec 100644
--- a/app/components/Utility/FormattedPrice.jsx
+++ b/app/components/Utility/FormattedPrice.jsx
@@ -89,10 +89,15 @@ class FormattedPrice extends React.Component {
 
     render() {
 
-        let {base_asset, quote_asset, base_amount, quote_amount,
+        let {base_asset, base_amount, quote_amount,
           marketDirections, hide_symbols, noPopOver} = this.props;
         const {marketId, first, second} = this.state;
         let inverted = marketDirections.get(marketId) || this.props.invert;
+        if (this.props.force_direction && second.get("symbol") === this.props.force_direction && inverted) {
+            inverted = false;
+        } else if (this.props.force_direction && first.get("symbol") === this.props.force_direction && !inverted) {
+            inverted = true;
+        }
         let base, quote;
         if (inverted) {
             base = second;
@@ -130,17 +135,17 @@ class FormattedPrice extends React.Component {
         if (!this.props.hide_value) {
             let value = price.toReal();
             if (isNaN(value) || !isFinite(value)) {
-                return <span>n/a</span>;
+                return <span>--</span>;
             }
-            let decimals = this.props.decimals ? this.props.decimals : base_asset.get("precision") + quote_asset.get("precision");
+            let decimals = this.props.decimals ? this.props.decimals : price.base.precision;
             decimals = Math.min(8, decimals);
-            if (base_asset.get("id") === "1.3.0") {
-                base_asset.get("precision");
+            if (base.get("id") === "1.3.0") {
+                base.get("precision");
             }
             formatted_value = (
                 <FormattedNumber
                     value={value}
-                    minimumFractionDigits={2}
+                    minimumFractionDigits={Math.max(2, decimals)}
                     maximumFractionDigits={decimals}
                 />
             );
diff --git a/app/components/Utility/TotalBalanceValue.jsx b/app/components/Utility/TotalBalanceValue.jsx
index a8759ab02a..b09adf11e3 100644
--- a/app/components/Utility/TotalBalanceValue.jsx
+++ b/app/components/Utility/TotalBalanceValue.jsx
@@ -3,14 +3,14 @@ import FormattedAsset from "./FormattedAsset";
 import ChainTypes from "./ChainTypes";
 import BindToChainState from "./BindToChainState";
 import utils from "common/utils";
-import MarketsActions from "actions/MarketsActions";
 import {ChainStore} from "bitsharesjs/es";
 import { connect } from "alt-react";
 import MarketsStore from "stores/MarketsStore";
 import SettingsStore from "stores/SettingsStore";
-import Immutable from "immutable";
+import {List} from "immutable";
 import Translate from "react-translate-component";
 import counterpart from "counterpart";
+import {MarketStatsCheck} from "./EquivalentPrice";
 
 /**
  *  Given an asset amount, displays the equivalent value in baseAsset if possible
@@ -22,90 +22,38 @@ import counterpart from "counterpart";
  *  -'fullPrecision' boolean to tell if the amount uses the full precision of the asset
  */
 
-class TotalValue extends React.Component {
+class TotalValue extends MarketStatsCheck {
 
     static propTypes = {
         fromAssets: ChainTypes.ChainAssetsList.isRequired,
         toAsset: ChainTypes.ChainAsset.isRequired,
+        coreAsset: ChainTypes.ChainAsset.isRequired,
         inHeader: React.PropTypes.bool,
         label: React.PropTypes.string
     };
 
     static defaultProps = {
         inHeader: false,
-        label: ""
+        label: "",
+        coreAsset: "1.3.0"
     };
 
     constructor() {
         super();
-
-        this.fromStatsIntervals = {};
-        this.toStatsInterval = null;
-    }
-
-    componentWillMount() {
-        this._startUpdates(this.props);
     }
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(np) {
         return (
-            !utils.are_equal_shallow(nextProps.fromAssets, this.props.fromAssets) ||
-            nextProps.toAsset !== this.props.toAsset ||
-            !utils.are_equal_shallow(nextProps.balances, this.props.balances) ||
-            !utils.are_equal_shallow(nextProps.openOrders, this.props.openOrders) ||
-            !utils.are_equal_shallow(nextProps.collateral, this.props.collateral) ||
-            !utils.are_equal_shallow(nextProps.debt, this.props.debt)
+            super.shouldComponentUpdate(np) ||
+            !utils.are_equal_shallow(np.fromAssets, this.props.fromAssets) ||
+            np.toAsset !== this.props.toAsset ||
+            !utils.are_equal_shallow(np.balances, this.props.balances) ||
+            !utils.are_equal_shallow(np.openOrders, this.props.openOrders) ||
+            !utils.are_equal_shallow(np.collateral, this.props.collateral) ||
+            !utils.are_equal_shallow(np.debt, this.props.debt)
         );
     }
 
-    _startUpdates(props) {
-        let coreAsset = ChainStore.getAsset("1.3.0");
-        let {fromAssets} = props;
-
-        if (coreAsset) {
-            // From assets
-            fromAssets.forEach(asset => {
-                if (asset) {
-
-                    if (asset.get("id") !== coreAsset.get("id")) {
-                        setTimeout(() => {
-                            MarketsActions.getMarketStats(coreAsset, asset);
-                            this.fromStatsIntervals[asset.get("id")] = setInterval(MarketsActions.getMarketStats.bind(this, coreAsset, asset), 10 * 60 * 1000);
-                        }, 50)
-                    }
-                }
-            })
-
-            // To asset
-            if (props.toAsset.get("id") !== coreAsset.get("id")) {
-                // wrap this in a timeout to prevent dispatch in the middle of a dispatch
-                MarketsActions.getMarketStats.defer(coreAsset, this.props.toAsset);
-                this.toStatsInterval = setInterval(() => {
-                    MarketsActions.getMarketStats.defer(coreAsset, this.props.toAsset);
-                }, 5 * 60 * 1000);
-            }
-        }
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (!Immutable.is(nextProps.toAsset, this.props.toAsset)) {
-            this._stopUpdates();
-
-            this._startUpdates(nextProps);
-        }
-    }
-
-    _stopUpdates() {
-        for (let key in this.fromStatsIntervals) {
-            clearInterval(this.fromStatsIntervals[key]);
-        }
-        clearInterval(this.toStatsInterval);
-    }
-
-    componentWillUnmount() {
-        this._stopUpdates();
-    }
-
     _convertValue(amount, fromAsset, toAsset, marketStats, coreAsset) {
         if (!fromAsset || !toAsset) {
             return 0;
@@ -305,7 +253,7 @@ class TotalBalanceValue extends React.Component {
 
     render() {
         let {balances, collateral, debt, openOrders, inHeader} = this.props;
-        let assets = Immutable.List();
+        let assets = List();
         let amounts = [];
 
         balances.forEach(balance => {
@@ -349,7 +297,7 @@ class AccountWrapper extends React.Component {
     }
 
     render() {
-        let balanceList = Immutable.List(), collateral = {}, debt = {}, openOrders = {};
+        let balanceList = List(), collateral = {}, debt = {}, openOrders = {};
 
         this.props.accounts.forEach(account => {
 
diff --git a/app/lib/common/MarketClasses.js b/app/lib/common/MarketClasses.js
index 49bccbf12f..2fd2ddc6aa 100644
--- a/app/lib/common/MarketClasses.js
+++ b/app/lib/common/MarketClasses.js
@@ -299,6 +299,22 @@ class Price {
             quote: this.quote.toObject()
         };
     }
+
+    times(p, common = "1.3.0") {
+        const p2 = (
+            (p.base.asset_id === common &&
+            this.quote.asset_id === common) ||
+            (p.quote.asset_id === common &&
+            this.base.asset_id === common)
+        ) ? p.clone() : p.invert();
+
+        const np = p2.toReal() * this.toReal();
+        return new Price({
+            base: p2.base,
+            quote: this.quote,
+            real: np
+        });
+    }
 }
 
 class FeedPrice extends Price {

From 4d88a538649ce87480315230b4346022f3cfb0c8 Mon Sep 17 00:00:00 2001
From: Bill Butler <bill@butler.net>
Date: Sun, 8 Oct 2017 13:41:05 -0500
Subject: [PATCH 26/82] Small Dashboard css tweaks

---
 app/assets/locales/locale-en.json               | 2 +-
 app/assets/stylesheets/components/_account.scss | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 0efbde5686..d9bb59da00 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -365,7 +365,7 @@
     "settle": "Settle",
     "no_orders": "No open orders",
     "asset_details": "Asset details",
-    "portfolio": "Portfolio",
+    "portfolio": "My Portfolio",
     "activity": "Activity",
     "eq_value_header": "Value ({asset})",
     "qty": "Qty",
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index c20e0d449d..cc2d62e2b2 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -143,7 +143,7 @@ div.overview-tabs {
             font-size: 0.8rem;
         }
         div.tab-subtext {
-            font-size: 1rem;
+            font-size: 0.8rem;
             text-align: right;
         }
     }
@@ -152,10 +152,10 @@ ul.account-overview {
     width: 100%;
     li {
         > a {
-            font-size: 1rem;
+            font-size: 1.1rem;
 
             > div.tab-subtext {
-                font-size: 85%;
+                font-size: 70%;
                 text-align: right;
             }
         }

From c29563a85f8c7b5fa3fd20c5b3ee23bb570aa7a3 Mon Sep 17 00:00:00 2001
From: Bill Butler <bill@butler.net>
Date: Mon, 9 Oct 2017 19:00:53 -0500
Subject: [PATCH 27/82] #532 change noone to no one

---
 app/assets/locales/locale-en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 8dc92dfc83..f69c565e68 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1071,7 +1071,7 @@
     "wallet_browser": "Your Web Browser is your Wallet",
     "has_wallet": "When you create your first BitShares account, a BitShares local wallet will be automatically created as well and stored in your browser. This local wallet is encrypted with your password, and will contain any private keys belonging to your accounts. It is important that you take the time to backup this wallet once created!",
     "go_get_started": "See Get Started tips",
-    "wallet_crucial": "Your local wallet is <strong>only stored</strong> in your browser, so it is crucial that you create a backup that will enable you to recover your wallet if the data in your browser is lost! <strong>Noone else can restore your account if you lose your backup.</strong>",
+    "wallet_crucial": "Your local wallet is <strong>only stored</strong> in your browser, so it is crucial that you create a backup that will enable you to recover your wallet if the data in your browser is lost! <strong>No one else can restore your account if you lose your backup.</strong>",
     "wallet_move": "This backup file can also be used to move your local wallet to different computers or different browsers. In order to restore your local wallet using this backup <strong>you will also need your password!</strong>",
     "wallet_lose_warning": "<strong>IMPORTANT: If you lose your local wallet or your pass phrase you will be unable to access any of your funds again. Make sure you store the backup somewhere safe, and memorize or write down your password!</strong>",
     "tips_deposit": "Make a deposit",
@@ -1125,7 +1125,7 @@
     "no_wallet": "You do not have a local wallet yet",
     "generated": "Generated password",
     "account_exp": "This account will be created on the blockchain and will be your address for any transfers you want to make! <strong>There are no long Bitcoin-style addresses in Bitshares!</strong>",
-    "understand_1": "I understand that noone can recover my password if I lose or forget it",
+    "understand_1": "I understand that no one can recover my password if I lose or forget it",
     "understand_2": "I have written down or oherwise stored my password",
     "understand_3": " I understand that I will lose access to my funds if I lose my password",
     "bts_rules": "The first rule of BitShares is: Do not lose your password.<br/>The second rule of BitShares is: Do not lose your password.<br />The third rule of BitShares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password.",

From ae84a3c409867ef0a83401587df02da34b9eb963 Mon Sep 17 00:00:00 2001
From: tianyekuo <tianyekuo@hotmail.com>
Date: Tue, 10 Oct 2017 15:06:44 +0800
Subject: [PATCH 28/82] fix: parseInt for minimum_feeds when create asset
 (#539)

When update minimum_feeds, the type will change from integer to string cause create asset fail.

Repo:
1. create asset
2. select "SmartCoin" option
3. update "MININUM NUMBER OF FEEDs" from default 7 to 3
4. finish the process to do create asset

Issue:
Error shows minimum_feeds should be integer
---
 app/components/Account/AccountAssetCreate.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/Account/AccountAssetCreate.jsx b/app/components/Account/AccountAssetCreate.jsx
index 94628c72cb..ab4a654e4e 100644
--- a/app/components/Account/AccountAssetCreate.jsx
+++ b/app/components/Account/AccountAssetCreate.jsx
@@ -274,7 +274,9 @@ class AccountAssetCreate extends React.Component {
             case "maximum_force_settlement_volume":
                 bitasset_opts[value] = parseFloat(e.target.value) * assetConstants.GRAPHENE_1_PERCENT;
                 break;
-
+            case "minimum_feeds":
+                bitasset_opts[value] = parseInt(e.target.value, 10);
+                break;
             case "feed_lifetime_sec":
             case "force_settlement_delay_sec":
                 console.log(e.target.value, parseInt(parseFloat(e.target.value) * 60, 10));

From 16b86e7537531042a16708f666fc5cce81264cac Mon Sep 17 00:00:00 2001
From: Chris Beaven <smileychris@gmail.com>
Date: Tue, 10 Oct 2017 20:12:04 +1300
Subject: [PATCH 29/82] Fix typo (oherwise -> otherwise) (#534)

---
 app/assets/locales/locale-de.json | 2 +-
 app/assets/locales/locale-en.json | 2 +-
 app/assets/locales/locale-es.json | 2 +-
 app/assets/locales/locale-fr.json | 2 +-
 app/assets/locales/locale-ko.json | 2 +-
 app/assets/locales/locale-tr.json | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/locales/locale-de.json b/app/assets/locales/locale-de.json
index 1325efd6f6..7e7dbcc341 100644
--- a/app/assets/locales/locale-de.json
+++ b/app/assets/locales/locale-de.json
@@ -873,7 +873,7 @@
     "current_pass": "Current password",
     "generated": "Generated password",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "bts_rules": "The first rule of Bitshares is: Do not lose your password.<br/>The second rule of Bitshares is: Do not lose your password.<br />The third rule of Bitshares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password."
   },
   "borrow": {
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index f69c565e68..d0f389ba64 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1126,7 +1126,7 @@
     "generated": "Generated password",
     "account_exp": "This account will be created on the blockchain and will be your address for any transfers you want to make! <strong>There are no long Bitcoin-style addresses in Bitshares!</strong>",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "understand_3": " I understand that I will lose access to my funds if I lose my password",
     "bts_rules": "The first rule of BitShares is: Do not lose your password.<br/>The second rule of BitShares is: Do not lose your password.<br />The third rule of BitShares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password.",
     "ok_done": "OK, take me to the dashboard"
diff --git a/app/assets/locales/locale-es.json b/app/assets/locales/locale-es.json
index 9fd2bf62ac..7e87a944e7 100644
--- a/app/assets/locales/locale-es.json
+++ b/app/assets/locales/locale-es.json
@@ -720,7 +720,7 @@
     "current_pass": "Current password",
     "generated": "Generated password",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "bts_rules": "The first rule of Bitshares is: Do not lose your password.<br/>The second rule of Bitshares is: Do not lose your password.<br />The third rule of Bitshares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password."
   },
   "borrow": {
diff --git a/app/assets/locales/locale-fr.json b/app/assets/locales/locale-fr.json
index 6b38469cea..f78b1184cd 100644
--- a/app/assets/locales/locale-fr.json
+++ b/app/assets/locales/locale-fr.json
@@ -515,7 +515,7 @@
     "current_pass": "Current password",
     "generated": "Generated password",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "bts_rules": "The first rule of Bitshares is: Do not lose your password.<br/>The second rule of Bitshares is: Do not lose your password.<br />The third rule of Bitshares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password."
   },
   "refcode": {
diff --git a/app/assets/locales/locale-ko.json b/app/assets/locales/locale-ko.json
index 2e126ffac7..dc929317db 100644
--- a/app/assets/locales/locale-ko.json
+++ b/app/assets/locales/locale-ko.json
@@ -726,7 +726,7 @@
     "current_pass": "Current password",
     "generated": "Generated password",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "bts_rules": "The first rule of Bitshares is: Do not lose your password.<br/>The second rule of Bitshares is: Do not lose your password.<br />The third rule of Bitshares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password."
   },
   "borrow": {
diff --git a/app/assets/locales/locale-tr.json b/app/assets/locales/locale-tr.json
index 0ba0a2f2e4..367115883a 100644
--- a/app/assets/locales/locale-tr.json
+++ b/app/assets/locales/locale-tr.json
@@ -1065,7 +1065,7 @@
     "no_wallet": "Cüzdanınız bulunmamaktadır.",
     "generated": "Generated password",
     "understand_1": "I understand that no one can recover my password if I lose or forget it",
-    "understand_2": "I have written down or oherwise stored my password",
+    "understand_2": "I have written down or otherwise stored my password",
     "bts_rules": "The first rule of Bitshares is: Do not lose your password.<br/>The second rule of Bitshares is: Do not lose your password.<br />The third rule of Bitshares is: We cannot recover your password.<br />The fourth rule: If you can remember the password, it's not secure.<br />The fifth rule: Use only randomly-generated passwords.<br />The sixth rule: Do not tell anyone your password.<br />The seventh rule: Always back up your password."
   },
   "borrow": {

From 7e6d474452ccdbe5c7ee1a3aa78c55eb9faffadb Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 09:16:40 +0200
Subject: [PATCH 30/82] Fix #535: remove ellipsis and cap password length at 45
 chars

---
 app/components/Account/CreateAccountPassword.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Account/CreateAccountPassword.jsx b/app/components/Account/CreateAccountPassword.jsx
index e47fc8bd65..3b8fa76c26 100644
--- a/app/components/Account/CreateAccountPassword.jsx
+++ b/app/components/Account/CreateAccountPassword.jsx
@@ -37,7 +37,7 @@ class CreateAccountPassword extends React.Component {
             show_identicon: false,
             step: 1,
             showPass: false,
-            generatedPassword: "P" + key.get_random_key().toWif(),
+            generatedPassword: ("P" + key.get_random_key().toWif()).substr(0, 45),
             confirm_password: "",
             understand_1: false,
             understand_2: false,
@@ -205,7 +205,7 @@ class CreateAccountPassword extends React.Component {
                     <label className="left-label"><Translate content="wallet.generated" />&nbsp;&nbsp;<span className="tooltip" data-html={true} data-tip={counterpart.translate("tooltip.generate")}><Icon name="question-circle" /></span></label>
                     <div style={{paddingBottom: "0.5rem"}}>
                         <span className="inline-label">
-                            <input style={{maxWidth: "calc(30rem - 48px)", textOverflow: "ellipsis", fontSize: "80%"}} disabled value={this.state.generatedPassword} type="text"/>
+                            <input style={{maxWidth: "calc(30rem - 48px)", fontSize: "80%"}} disabled value={this.state.generatedPassword} type="text"/>
                             <CopyButton
                                 text={this.state.generatedPassword}
                                 tip="tooltip.copy_password"

From 1889ed320a60a456c05e9074c58d8687b74f968e Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 10:08:44 +0200
Subject: [PATCH 31/82] Set password and username type/name/ids for password
 managers #527

---
 app/components/Account/AccountSelector.jsx       | 5 ++++-
 app/components/Account/CreateAccountPassword.jsx | 2 +-
 app/components/Forms/AccountNameInput.jsx        | 4 ++--
 app/components/Forms/PasswordInput.jsx           | 6 ++----
 app/components/Wallet/WalletUnlockModal.jsx      | 4 ++--
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/components/Account/AccountSelector.jsx b/app/components/Account/AccountSelector.jsx
index 19a359a543..2fac5ecfd8 100644
--- a/app/components/Account/AccountSelector.jsx
+++ b/app/components/Account/AccountSelector.jsx
@@ -128,7 +128,10 @@ class AccountSelector extends React.Component {
                             {type === "pubkey" ? <div className="account-image"><Icon name="key" size="4x"/></div> :
                             <AccountImage size={{height: this.props.size || 80, width: this.props.size || 80}}
                                 account={this.props.account ? this.props.account.get("name") : null} custom_image={null}/>}
-                                <input type="text"
+                                <input
+                                    type="text"
+                                    name="username"
+                                    id="username"
                                     value={this.props.accountName || ""}
                                     placeholder={this.props.placeholder || counterpart.translate("account.name")}
                                     ref="user_input"
diff --git a/app/components/Account/CreateAccountPassword.jsx b/app/components/Account/CreateAccountPassword.jsx
index 3b8fa76c26..bd6b8f55dd 100644
--- a/app/components/Account/CreateAccountPassword.jsx
+++ b/app/components/Account/CreateAccountPassword.jsx
@@ -217,7 +217,7 @@ class CreateAccountPassword extends React.Component {
 
                 <section>
                     <label className="left-label"><Translate content="wallet.confirm_password" /></label>
-                    <input type="password" value={this.state.confirm_password} onChange={this._onInput.bind(this, "confirm_password")}/>
+                    <input type="password" name="password" id="password" value={this.state.confirm_password} onChange={this._onInput.bind(this, "confirm_password")}/>
                     {this.state.confirm_password && this.state.confirm_password !== this.state.generatedPassword ?
                     <div className="has-error"><Translate content="wallet.confirm_error" /></div> : null}
                 </section>
diff --git a/app/components/Forms/AccountNameInput.jsx b/app/components/Forms/AccountNameInput.jsx
index 4df481d034..42a7370296 100644
--- a/app/components/Forms/AccountNameInput.jsx
+++ b/app/components/Forms/AccountNameInput.jsx
@@ -133,9 +133,9 @@ class AccountNameInput extends React.Component {
                 <section>
                     <label className="left-label">{this.props.placeholder}</label>
                     <input
-                        name="value"
+                        name="username"
+                        id="username"
                         type="text"
-                        id={this.props.id}
                         ref="input"
                         autoComplete="off"
                         placeholder={null}
diff --git a/app/components/Forms/PasswordInput.jsx b/app/components/Forms/PasswordInput.jsx
index d5fb6e2e21..e918ea500b 100644
--- a/app/components/Forms/PasswordInput.jsx
+++ b/app/components/Forms/PasswordInput.jsx
@@ -105,8 +105,7 @@ class PasswordInput extends Component {
                         <input
                             style={{marginBottom: this.props.checkStrength ? 0 : null}}
                             name="password"
-                            type="text"
-                            onFocus={() => {this.refs.password.setAttribute("type", "password");}}
+                            type="password"
                             ref="password"
                             autoComplete="off"
                             onChange={this.handleChange}
@@ -126,9 +125,8 @@ class PasswordInput extends Component {
                     <section style={{position: "relative", maxWidth: "30rem"}}>
                         <input
                             name="confirm_password"
-                            type="text"
+                            type="password"
                             ref="confirm_password"
-                            onFocus={() => {this.refs.confirm_password.setAttribute("type", "password");}}
                             autoComplete="off"
                             onChange={this.handleChange}
                         />
diff --git a/app/components/Wallet/WalletUnlockModal.jsx b/app/components/Wallet/WalletUnlockModal.jsx
index 040db97161..593a5e81ce 100644
--- a/app/components/Wallet/WalletUnlockModal.jsx
+++ b/app/components/Wallet/WalletUnlockModal.jsx
@@ -213,7 +213,7 @@ class WalletUnlockModal extends React.Component {
                                 <label className="left-label"><Translate content="settings.password" /></label>
                             </div>
                             <div className="input-area" style={{marginLeft: "3.5rem"}}>
-                                <input ref="password_input" type="password" tabIndex={tabIndex++} />
+                                <input ref="password_input" name="password" id="password" type="password" tabIndex={tabIndex++} />
                             </div>
                             {this.state.password_error ? <div className="error-area">
                                 <Translate content="wallet.pass_incorrect" />
@@ -225,7 +225,7 @@ class WalletUnlockModal extends React.Component {
 
                 <div style={{marginLeft: "3.5rem"}}>
                     <div className="button-group">
-                        <button tabIndex={tabIndex++} className="button" onClick={this.onPasswordEnter}><Translate content="header.unlock_short" /></button>
+                        <button tabIndex={tabIndex++} className="button" type="submit" onClick={this.onPasswordEnter}><Translate content="header.unlock_short" /></button>
                         <Trigger close={this.props.modalId}>
                             <div tabIndex={tabIndex++} className=" button"><Translate content="account.perm.cancel" /></div>
                         </Trigger>

From 05ad0aabae40eeca4f530d6a12d89fae53cfb3b7 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 10:14:45 +0200
Subject: [PATCH 32/82] Fix file reference in RudexGatewayDepositRequest

---
 .../DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx b/app/components/DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx
index d711276d83..c5a2301813 100644
--- a/app/components/DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx
+++ b/app/components/DepositWithdraw/rudex/RuDexGatewayDepositRequest.jsx
@@ -10,7 +10,7 @@ import ZfApi from "react-foundation-apps/src/utils/foundation-api";
 import AccountBalance from "../../Account/AccountBalance";
 import RuDexDepositAddressCache from "common/RuDexDepositAddressCache";
 import AssetName from "components/Utility/AssetName";
-import LinkToAccountById from "components/Blockchain/LinkToAccountById";
+import LinkToAccountById from "components/Utility/LinkToAccountById";
 import {requestDepositAddress} from "common/RuDexMethods";
 import { rudexAPIs } from "api/apiConfig";
 import utils from "common/utils";

From d18a290dee643bcb17df1f51cd7969e90b3cd8f7 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 10:43:11 +0200
Subject: [PATCH 33/82] Implement tables feedback

---
 app/assets/stylesheets/base/_fonts.scss    | 10 ++---
 app/components/Account/AccountOverview.jsx | 48 +++-------------------
 app/components/Utility/EquivalentPrice.jsx |  2 +-
 3 files changed, 12 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/base/_fonts.scss b/app/assets/stylesheets/base/_fonts.scss
index b3e51b7568..e6e1f047d4 100644
--- a/app/assets/stylesheets/base/_fonts.scss
+++ b/app/assets/stylesheets/base/_fonts.scss
@@ -118,6 +118,10 @@ button, .button {
   @include RobotoCondensed;
 }
 
+.table.dashboard-table > thead > tr > th {
+  @include RobotoRegular;
+}
+
 // .key-value-table tr > td:first-child {
 //   @include RobotoLight;
 // }
@@ -175,11 +179,7 @@ button, .button {
     @include RobotoCondensed;
   }
 
-  .table > thead > tr > th {
-    @include RobotoCondensed;
-  }
-
-  .key-value-table tr > td:first-child {
+   .key-value-table tr > td:first-child {
     @include SegoeUILight;
   }
 
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 337a8ce6cf..58c9608a54 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -132,8 +132,7 @@ class AccountOverview extends React.Component {
             let asset_type = balanceObject.get("asset_type");
             let asset = ChainStore.getObject(asset_type);
 
-            let assetInfoLinks;
-            let marketLink, directMarketLink, settleLink, transferLink;
+            let directMarketLink, settleLink, transferLink;
             let symbol = "";
             if (!asset) return null;
 
@@ -145,38 +144,15 @@ class AccountOverview extends React.Component {
             let preferredMarket = market ? market : core_asset ? core_asset.get("symbol") : "BTS";
 
             /* Table content */
-            const assetDetailURL = `/asset/${asset.get("symbol")}`;
-            const marketURL = `/market/${asset.get("symbol")}_${preferredMarket}`;
-
-            marketLink = notCore ? <a href={marketURL} onClick={this._onNavigate.bind(this, marketURL)}><AssetName name={asset.get("symbol")} /> : <AssetName name={preferredMarket} /></a> : null;
             directMarketLink = notCore ? <Link to={`/market/${asset.get("symbol")}_${preferredMarket}`}><Icon name="trade" className="icon-14px" /></Link> : emptyCell;
             transferLink = <Link to={`/transfer?asset=${asset.get("id")}`}><Icon name="transfer" className="icon-14px" /></Link>;
 
             let {isBitAsset, borrowModal, borrowLink} = renderBorrow(asset, this.props.account);
-            // if (isBitAsset) {
-
-
-                // let modalRef = "cp_modal_" + asset.get("id");
-                // borrowModal = <BorrowModal
-                //     ref={modalRef}
-                //     quote_asset={asset.get("id")}
-                //     backing_asset={asset.getIn(["bitasset", "options", "short_backing_asset"])}
-                //     account={this.props.account}
-                // />;
-                //
-                // borrowLink = <a onClick={() => {ReactTooltip.hide();this.refs[modalRef].show();}}><Translate content="exchange.borrow" /></a>;
-            // }
 
             /* Popover content */
             settleLink = <a href onClick={this._onSettleAsset.bind(this, asset.get("id"))}>
                 <Icon name="settle" className="icon-14px" />
             </a>;
-            assetInfoLinks = (
-            <ul>
-                <li><a href={assetDetailURL} onClick={this._onNavigate.bind(this, assetDetailURL)}><Translate content="account.asset_details"/></a></li>
-                {notCore ? <li>{marketLink}</li> : null}
-                {isBitAsset ? <li>{settleLink}</li> : null}
-            </ul>);
 
             const includeAsset = !hiddenAssets.includes(asset_type);
             const hasBalance = !!balanceObject.get("balance");
@@ -215,7 +191,7 @@ class AccountOverview extends React.Component {
                     <td style={{textAlign: "right"}}>
                         {hasBalance || hasOnOrder ? <BalanceComponent balance={balance} hide_asset /> : null}
                     </td>
-                    <td style={{textAlign: "right"}}><EquivalentPrice fromAsset={asset.get("id")} hide_symbols/></td>
+                    <td style={{textAlign: "right"}} className="column-hide-small"><EquivalentPrice fromAsset={asset.get("id")} hide_symbols/></td>
                     <td style={{textAlign: "right"}} className="column-hide-small">
                         {hasBalance || hasOnOrder ? <BalanceValueComponent balance={balance} toAsset={preferredUnit} hide_asset/> : null}
                     </td>
@@ -269,8 +245,6 @@ class AccountOverview extends React.Component {
             );
         });
 
-        const currentIndex = balances.length;
-
         if (optionalAssets) {
             optionalAssets.filter(asset => {
                 let isAvailable = false;
@@ -344,10 +318,6 @@ class AccountOverview extends React.Component {
                     );
                 }
             });
-
-            // if (balances.length !== currentIndex) {
-            //     balances.splice(currentIndex + 1, 0, <tr style={{backgroundColor: "transparent"}} key={"hidden_" + currentIndex} ><td style={{height: 20}} colSpan="11"></td></tr>);
-            // }
         }
 
         function sortAlphabetic(a, b) {
@@ -378,7 +348,7 @@ class AccountOverview extends React.Component {
         let call_orders = [], collateral = {}, debt = {};
 
         if (account.toJS && account.has("call_orders")) call_orders = account.get("call_orders").toJS();
-        let includedBalances, hiddenBalances, includedOrders, hiddenOrders;
+        let includedBalances, hiddenBalances;
         let account_balances = account.get("balances");
 
         let includedBalancesList = Immutable.List(), hiddenBalancesList = Immutable.List();
@@ -422,16 +392,10 @@ class AccountOverview extends React.Component {
 
             let included = this._renderBalances(includedBalancesList, this.state.alwaysShowAssets, true);
             includedBalances = included.balances;
-            includedOrders = included.openOrders;
             let hidden = this._renderBalances(hiddenBalancesList, this.state.alwaysShowAssets);
             hiddenBalances = hidden.balances;
-            hiddenOrders = hidden.openOrders;
         }
 
-        // if (hiddenBalances) {
-        //     hiddenBalances.unshift(<tr style={{backgroundColor: "transparent"}} key="hidden"><td style={{height: 20}} colSpan="11"></td></tr>);
-        // }
-
         let totalBalanceList = includedBalancesList.concat(hiddenBalancesList);
 
         let totalValue =
@@ -488,7 +452,7 @@ class AccountOverview extends React.Component {
             ]}
         />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="9"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td colSpan="2"></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -535,7 +499,7 @@ class AccountOverview extends React.Component {
                                             {/*<th><Translate component="span" content="modal.settle.submit" /></th>*/}
                                             <th><Translate component="span" content="account.asset" /></th>
                                             <th style={{textAlign: "right"}}><Translate content="account.qty" /></th>
-                                            <th style={{textAlign: "right"}}><Translate content="exchange.price" /> (<AssetName name={preferredUnit} />)</th>
+                                            <th className="column-hide-small" style={{textAlign: "right"}}><Translate content="exchange.price" /> (<AssetName name={preferredUnit} />)</th>
                                             {/*<<th style={{textAlign: "right"}}><Translate component="span" content="account.bts_market" /></th>*/}
                                             <th style={{textAlign: "right"}} className="column-hide-small">
                                                 <TranslateWithLinks
@@ -554,7 +518,7 @@ class AccountOverview extends React.Component {
                                             <th><Translate content="account.trade" /></th>
                                             <th><Translate content="exchange.borrow" /></th>
                                             <th><Translate content="account.settle" /></th>
-                                            <th><Translate content={!showHidden ? "exchange.hide" : "account.perm.show"} /></th>
+                                            <th className="column-hide-small"><Translate content={!showHidden ? "exchange.hide" : "account.perm.show"} /></th>
                                         </tr>
                                     </thead>
                                     <tbody>
diff --git a/app/components/Utility/EquivalentPrice.jsx b/app/components/Utility/EquivalentPrice.jsx
index 72b86ea053..b00d845d49 100644
--- a/app/components/Utility/EquivalentPrice.jsx
+++ b/app/components/Utility/EquivalentPrice.jsx
@@ -135,7 +135,7 @@ class EquivalentPrice extends MarketStatsCheck {
         }
 
         if (toAsset.get("id") === fromAsset.get("id")) {
-            return <span>--</span>;
+            return <span>1.00</span>;
         }
         let finalPrice;
         if (toPrice && fromPrice) {

From f63b01c3e1425d63424854d73b1e9aac317018d9 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 11:11:10 +0200
Subject: [PATCH 34/82] Add a price column to Margin Positions

---
 app/assets/stylesheets/components/_account.scss  |  1 +
 app/components/Account/AccountOverview.jsx       |  2 +-
 app/components/Blockchain/CollateralPosition.jsx | 16 +++++++++++++---
 app/components/Utility/EquivalentPrice.jsx       |  9 +++++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index cc2d62e2b2..a4a65ca7e6 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -173,6 +173,7 @@ ul.account-overview {
 table.table.dashboard-table {
     > thead > tr > th {
         font-weight: 600;
+        font-size: 80%;
         text-align: center;
     }
     > tbody > tr {
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 58c9608a54..5d2666c542 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -555,7 +555,7 @@ class AccountOverview extends React.Component {
                                                 <td>{collateralValue}</td>
                                                 <td></td>
                                                 <td>{marginValue}</td>
-                                                <td colSpan="4"></td>
+                                                <td colSpan="5"></td>
                                             </tr>
                                         </CollateralPosition>
                                     </div>
diff --git a/app/components/Blockchain/CollateralPosition.jsx b/app/components/Blockchain/CollateralPosition.jsx
index 32a3acd7b9..935b77b914 100644
--- a/app/components/Blockchain/CollateralPosition.jsx
+++ b/app/components/Blockchain/CollateralPosition.jsx
@@ -15,6 +15,7 @@ import TotalBalanceValue from "../Utility/TotalBalanceValue";
 import {List} from "immutable";
 import {Link} from "react-router/es";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
+import EquivalentPrice from "../Utility/EquivalentPrice";
 
 const wallet_api = new WalletApi();
 const alignRight = {textAlign: "right"};
@@ -182,17 +183,23 @@ class CollateralPosition extends React.Component {
                         hide_asset
                     />
                 </td>
-                <td style={alignRight} className={"center-content column-hide-small"}>
+                <td style={alignRight} className={"column-hide-small"}>
                     <FormattedPrice
-                        decimals={2}
                         base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
                         quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
                         hide_symbols
                     />
                 </td>
+                <td style={alignRight} className={"column-hide-small"}>
+                    <EquivalentPrice
+                        forceDirection={false}
+                        fromAsset={co.call_price.base.asset_id}
+                        toAsset={co.call_price.quote.asset_id}
+                        hide_symbols
+                    />
+                </td>
                 <td className={"center-content column-hide-small"} style={alignLeft}>
                     <FormattedPrice
-                        decimals={2}
                         base_amount={co.call_price.base.amount} base_asset={co.call_price.base.asset_id}
                         quote_amount={co.call_price.quote.amount} quote_asset={co.call_price.quote.asset_id}
                         hide_value
@@ -280,6 +287,9 @@ const CollateralTable = ({callOrders, account, className, children, preferredUni
                         <Translate content="exchange.call" />
                     </div>
                 </th>
+                <th style={alignRight} className="column-hide-small">
+                    <Translate content="exchange.price" />
+                </th>
                 <th style={alignLeft}><Translate content="explorer.assets.units" /></th>
                 <th><Translate content="borrow.adjust_short" /></th>
                 <th><Translate content="transfer.close" /></th>
diff --git a/app/components/Utility/EquivalentPrice.jsx b/app/components/Utility/EquivalentPrice.jsx
index b00d845d49..9d62963870 100644
--- a/app/components/Utility/EquivalentPrice.jsx
+++ b/app/components/Utility/EquivalentPrice.jsx
@@ -104,7 +104,8 @@ class EquivalentPrice extends MarketStatsCheck {
 
     static defaultProps = {
         toAsset: "1.3.0",
-        coreAsset: "1.3.0"
+        coreAsset: "1.3.0",
+        forceDirection: true
     }
 
     constructor(props) {
@@ -123,7 +124,7 @@ class EquivalentPrice extends MarketStatsCheck {
 
 
     render() {
-        const {coreAsset, fromAsset, toAsset, marketStats, ...others} = this.props;
+        const {coreAsset, fromAsset, toAsset, marketStats, forceDirection, ...others} = this.props;
         const toMarket = toAsset.get("symbol") + "_" + coreAsset.get("symbol");
         const fromMarket = fromAsset.get("symbol") + "_" + coreAsset.get("symbol");
         let toPrice, fromPrice;
@@ -153,7 +154,7 @@ class EquivalentPrice extends MarketStatsCheck {
         ) {
             return (
                 <FormattedPrice
-                    force_direction={toAsset.get("symbol")}
+                    force_direction={forceDirection ? toAsset.get("symbol") : false}
                     base_amount={finalPrice.base.amount}
                     base_asset={finalPrice.base.asset_id}
                     quote_amount={finalPrice.quote.amount}
@@ -177,7 +178,7 @@ export default class EquivalentPriceWrapper extends React.Component {
             stores={[SettingsStore, MarketsStore]}
             inject={{
                 toAsset: () => {
-                    return SettingsStore.getState().settings.get("unit", "1.3.0");
+                    return this.props.toAsset || SettingsStore.getState().settings.get("unit", "1.3.0");
                 },
                 marketStats: () => {
                     return MarketsStore.getState().allMarketStats;

From 1e63009c04707994b3f69496427231eac1cbd847 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 12:28:27 +0200
Subject: [PATCH 35/82] Color margin position total depending on margin status
 #378

---
 .../stylesheets/themes/_theme-template.scss   |  6 ++
 app/components/Account/AccountOverview.jsx    | 36 +++++++---
 app/lib/common/accountHelper.js               | 68 +++++++++++++++++++
 3 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 app/lib/common/accountHelper.js

diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index df714667d6..a71e3c16b3 100644
--- 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
index 5d2666c542..b5914ab5c7 100644
--- 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
new file mode 100644
index 0000000000..6b9be12d09
--- /dev/null
+++ 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
+};

From f97cda93c70be36eacd4207f06d54224e1224028 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 12:30:49 +0200
Subject: [PATCH 36/82] Remove logging

---
 app/components/Account/AccountOverview.jsx | 1 -
 app/lib/common/accountHelper.js            | 2 --
 2 files changed, 3 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index b5914ab5c7..8f7eb622c3 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -67,7 +67,6 @@ class AccountOverview extends React.Component {
 
     _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;
diff --git a/app/lib/common/accountHelper.js b/app/lib/common/accountHelper.js
index 6b9be12d09..8fa8e121b9 100644
--- a/app/lib/common/accountHelper.js
+++ b/app/lib/common/accountHelper.js
@@ -43,9 +43,7 @@ function checkMarginStatus(account) {
                             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";

From 8c57b283d713b36b745533d5dd4db9655d2e59c6 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 15:06:24 +0200
Subject: [PATCH 37/82] Use account.assets from new API to display list of
 issued assets

---
 app/actions/AssetActions.js              |  4 +--
 app/components/Account/AccountAssets.jsx | 40 +++++++++++++++++-------
 app/components/Explorer/Assets.jsx       |  6 ++--
 app/stores/AssetStore.js                 |  8 ++---
 package.json                             |  2 +-
 5 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/app/actions/AssetActions.js b/app/actions/AssetActions.js
index ec2e37558b..764885a2e8 100644
--- a/app/actions/AssetActions.js
+++ b/app/actions/AssetActions.js
@@ -301,7 +301,7 @@ class AssetActions {
                         delete inProgress[id];
                         dispatch({
                             assets: assets,
-                            dynamic_data: results[0],
+                            dynamic: results[0],
                             bitasset_data: results[1],
                             loading: false
                         });
@@ -356,7 +356,7 @@ class AssetActions {
                         delete inProgress[id];
                         dispatch({
                             asset: asset[0],
-                            dynamic_data: results[0][0],
+                            dynamic: results[0][0],
                             bitasset_data: results[1] ? results[1][0] : null
                         });
                     });
diff --git a/app/components/Account/AccountAssets.jsx b/app/components/Account/AccountAssets.jsx
index 3a16c93ed5..f45e4692f8 100644
--- a/app/components/Account/AccountAssets.jsx
+++ b/app/components/Account/AccountAssets.jsx
@@ -5,7 +5,6 @@ import Translate from "react-translate-component";
 import AssetActions from "actions/AssetActions";
 import AssetStore from "stores/AssetStore";
 import AccountActions from "actions/AccountActions";
-import Trigger from "react-foundation-apps/src/trigger";
 import BaseModal from "../Modal/BaseModal";
 import FormattedAsset from "../Utility/FormattedAsset";
 import ZfApi from "react-foundation-apps/src/utils/foundation-api";
@@ -18,8 +17,12 @@ import IssueModal from "../Modal/IssueModal";
 import ReserveAssetModal from "../Modal/ReserveAssetModal";
 import { connect } from "alt-react";
 import assetUtils from "common/asset_utils";
+import { Map, List } from "immutable";
+import ChainTypes from "../Utility/ChainTypes";
+import BindToChainState from "../Utility/BindToChainState";
 
 class AccountAssets extends React.Component {
+
     static defaultProps = {
         symbol: "",
         name: "",
@@ -29,6 +32,7 @@ class AccountAssets extends React.Component {
     };
 
     static propTypes = {
+        assetsList: ChainTypes.ChainAssetsList,
         symbol: PropTypes.string.isRequired
     };
 
@@ -61,7 +65,7 @@ class AccountAssets extends React.Component {
     }
 
     _checkAssets(assets, force) {
-
+        if (this.props.account.get("assets").size) return;
         let lastAsset = assets.sort((a, b) => {
             if (a.symbol > b.symbol) {
                 return 1;
@@ -177,7 +181,7 @@ class AccountAssets extends React.Component {
     }
 
     render() {
-        let {account, account_name, searchAccounts, assets} = this.props;
+        let {account, account_name, searchAccounts, assets, assetsList} = this.props;
         let {issue, errors, isValid, create} = this.state;
 
         let accountExists = true;
@@ -190,8 +194,14 @@ class AccountAssets extends React.Component {
             return <div className="grid-block"><h5><Translate component="h5" content="account.errors.not_found" name={account_name} /></h5></div>;
         }
 
-        let isMyAccount = PrivateKeyStore.hasKey(account.getIn(["owner", "key_auths", "0", "0"]));
-        let myAssets = assets.filter(asset => {
+        if (assetsList.length) {
+            assets = assets.clear();
+            assetsList.forEach(a => {
+                if (a) assets = assets.set(a.get("id"), a.toJS());
+            });
+        }
+        let myAssets = assets
+        .filter(asset => {
             return asset.issuer === account.get("id");
         })
         .sort((a, b) => {
@@ -208,7 +218,7 @@ class AccountAssets extends React.Component {
                     <tr key={asset.symbol}>
                         <td><Link to={`/asset/${asset.symbol}`}>{asset.symbol}</Link></td>
                         <td style={{maxWidth: "250px"}}>{desc}</td>
-                        <td><FormattedAsset amount={parseInt(asset.dynamic_data.current_supply, 10)} asset={asset.id} /></td>
+                        <td><FormattedAsset amount={parseInt(asset.dynamic.current_supply, 10)} asset={asset.id} /></td>
                         <td><FormattedAsset amount={parseInt(asset.options.max_supply, 10)} asset={asset.id} /></td>
                         <td>
                             {!asset.bitasset_data_id ? (
@@ -233,10 +243,6 @@ class AccountAssets extends React.Component {
                 );
         }).toArray();
 
-        let autoCompleteAccounts = searchAccounts.filter(a => {
-            return a.indexOf(this.state.searchTerm) !== -1;
-        });
-
         return (
             <div className="grid-content">
 
@@ -291,11 +297,21 @@ class AccountAssets extends React.Component {
     }
 }
 
+AccountAssets = BindToChainState(AccountAssets);
+
 export default connect(AccountAssets, {
     listenTo() {
         return [AssetStore];
     },
-    getProps() {
-        return {assets: AssetStore.getState().assets};
+    getProps(props) {
+        let assets = Map(), assetsList = List();
+        if (props.account.get("assets", []).size) {
+            props.account.get("assets", []).forEach(id => {
+                assetsList = assetsList.push(id);
+            });
+        } else {
+            assets = AssetStore.getState().assets;
+        }
+        return {assets, assetsList};
     }
 });
diff --git a/app/components/Explorer/Assets.jsx b/app/components/Explorer/Assets.jsx
index d73403629b..f90c010c44 100644
--- a/app/components/Explorer/Assets.jsx
+++ b/app/components/Explorer/Assets.jsx
@@ -98,7 +98,7 @@ class Assets extends React.Component {
                 <tr key={asset.symbol}>
                     <td><Link to={`/asset/${asset.symbol}`}><AssetName name={asset.symbol} /></Link></td>
                     <td>{this.linkToAccount(asset.issuer)}</td>
-                    <td><FormattedAsset amount={asset.dynamic_data.current_supply} asset={asset.id} hide_asset={true}/></td>
+                    <td><FormattedAsset amount={asset.dynamic.current_supply} asset={asset.id} hide_asset={true}/></td>
                     <td><Link className="button outline" to={`/market/${marketID}`}><Translate content="header.exchange" /></Link></td>
                 </tr>
             );
@@ -123,7 +123,7 @@ class Assets extends React.Component {
                 <tr key={asset.symbol}>
                     <td><Link to={`/asset/${asset.symbol}`}><AssetName name={asset.symbol} /></Link></td>
                     <td>{this.linkToAccount(asset.issuer)}</td>
-                    <td><FormattedAsset amount={asset.dynamic_data.current_supply} asset={asset.id} hide_asset={true}/></td>
+                    <td><FormattedAsset amount={asset.dynamic.current_supply} asset={asset.id} hide_asset={true}/></td>
                     <td><Link className="button outline" to={`/market/${marketID}`}><Translate content="header.exchange" /></Link></td>
                 </tr>
             );
@@ -165,7 +165,7 @@ class Assets extends React.Component {
                         </div> : null}
                         <div style={{padding: "0 20px 5px 0", lineHeight: "18px"}}>
                             <LinkToAccountById account={asset.issuer} />
-                            <span> - <FormattedAsset amount={asset.dynamic_data.current_supply} asset={asset.id} /></span>
+                            <span> - <FormattedAsset amount={asset.dynamic.current_supply} asset={asset.id} /></span>
                             {description.expiry ? <span> - {description.expiry}</span> : null}
                         </div>
                     </td>
diff --git a/app/stores/AssetStore.js b/app/stores/AssetStore.js
index 25c8a98db6..3c531353fa 100644
--- a/app/stores/AssetStore.js
+++ b/app/stores/AssetStore.js
@@ -37,9 +37,9 @@ class AssetStore extends BaseStore {
         if (payload.assets) {
             payload.assets.forEach(asset => {
 
-                for (var i = 0; i < payload.dynamic_data.length; i++) {
-                    if (payload.dynamic_data[i].id === asset.dynamic_asset_data_id) {
-                        asset.dynamic_data = payload.dynamic_data[i];
+                for (var i = 0; i < payload.dynamic.length; i++) {
+                    if (payload.dynamic[i].id === asset.dynamic_asset_data_id) {
+                        asset.dynamic = payload.dynamic[i];
                         break;
                     }
                 }
@@ -81,7 +81,7 @@ class AssetStore extends BaseStore {
         }
 
         // console.log("onGetAsset payload:", payload);
-        asset.dynamic_data = payload.dynamic_data;
+        asset.dynamic = payload.dynamic;
 
         if (payload.bitasset_data) {
             asset.bitasset_data = payload.bitasset_data;
diff --git a/package.json b/package.json
index 325254a8f8..78da38cb99 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "alt-container": "^1.0.0",
     "alt-react": "0.0.1",
     "bignumber.js": "^4.0.0",
-    "bitsharesjs": "^1.3.1",
+    "bitsharesjs": "^1.3.2",
     "classnames": "^2.2.1",
     "cookies-js": "^1.2.1",
     "counterpart": "^0.17.1",

From 37ddaf21bb09739338c4008ab4b673dbb1a6595e Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 15:21:33 +0200
Subject: [PATCH 38/82] Harmonize login forms between modes

---
 app/assets/stylesheets/components/_forms.scss | 8 ++++++++
 app/components/Wallet/WalletUnlockModal.jsx   | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss
index 52228cb0db..23fc211616 100644
--- a/app/assets/stylesheets/components/_forms.scss
+++ b/app/assets/stylesheets/components/_forms.scss
@@ -269,3 +269,11 @@ div.dropdown-wrapper.upper-case {
         text-transform: uppercase;
     }
 }
+
+form.full-width {
+
+    section > input {
+        max-width: 100%;
+    }
+
+}
diff --git a/app/components/Wallet/WalletUnlockModal.jsx b/app/components/Wallet/WalletUnlockModal.jsx
index 593a5e81ce..3d6ab6bfc7 100644
--- a/app/components/Wallet/WalletUnlockModal.jsx
+++ b/app/components/Wallet/WalletUnlockModal.jsx
@@ -154,7 +154,7 @@ class WalletUnlockModal extends React.Component {
             );
         }
         return (
-            <form onSubmit={this.onPasswordEnter} noValidate>
+            <form className="full-width" onSubmit={this.onPasswordEnter} noValidate style={{paddingTop: 20, margin: "0 3.5rem "}}>
                 <PasswordInput
                     ref="password_input"
                     onEnter={this.onPasswordEnter}
@@ -190,7 +190,7 @@ class WalletUnlockModal extends React.Component {
         let tabIndex = 1;
 
         return (
-            <form onSubmit={this.onPasswordEnter} noValidate style={{paddingTop: 20}}>
+            <form onSubmit={this.onPasswordEnter} noValidate style={{paddingTop: 20, marginRight: "3.5rem"}}>
                 {/* Dummy input to trick Chrome into disabling auto-complete */}
                 <input type="text" className="no-padding no-margin" style={{visibility: "hidden", height: 0}}/>
 

From e49b352746148b40c25ab658ba5b35118dfd6b35 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 23:21:39 +0200
Subject: [PATCH 39/82] Change to local wallet mode after restoring a backup

---
 app/components/Wallet/Backup.jsx | 54 +++++++-------------------------
 1 file changed, 11 insertions(+), 43 deletions(-)

diff --git a/app/components/Wallet/Backup.jsx b/app/components/Wallet/Backup.jsx
index 186d008efa..2d75d2e17a 100644
--- a/app/components/Wallet/Backup.jsx
+++ b/app/components/Wallet/Backup.jsx
@@ -13,6 +13,7 @@ import cname from "classnames";
 import Translate from "react-translate-component";
 import {ChainConfig} from "bitsharesjs-ws";
 import {PrivateKey} from "bitsharesjs/es";
+import SettingsActions from "actions/SettingsActions";
 
 const connectObject = {
     listenTo() {
@@ -42,27 +43,6 @@ class BackupCreate extends Component {
 }
 BackupCreate = connect(BackupCreate, connectObject);
 
-class BackupVerify extends Component {
-    render() {
-        return (
-            <div style={{maxWidth: "40rem"}}>
-
-                <h3><Translate content="wallet.verify_prior_backup" /></h3>
-
-                <Upload>
-                    <NameSizeModified/>
-                    <DecryptBackup saveWalletObject={true}>
-                        <h4><Translate content="wallet.verified" /></h4>
-                    </DecryptBackup>
-                    <Reset/>
-                </Upload>
-
-            </div>
-        );
-    }
-}
-BackupVerify = connect(BackupVerify, connectObject);
-
 // layout is a small project
 // class WalletObjectInspector extends Component {
 //     static propTypes={ walletObject: PropTypes.object }
@@ -120,9 +100,9 @@ class Restore extends Component {
     }
 
     isRestored() {
-        let new_wallet = this.props.wallet.new_wallet
-        let has_new_wallet = this.props.wallet.wallet_names.has(new_wallet)
-        return has_new_wallet
+        let new_wallet = this.props.wallet.new_wallet;
+        let has_new_wallet = this.props.wallet.wallet_names.has(new_wallet);
+        return has_new_wallet;
     }
 
     render() {
@@ -151,7 +131,12 @@ class Restore extends Component {
         WalletActions.restore(
             this.props.wallet.new_wallet,
             this.props.backup.wallet_object
-        )
+        );
+        SettingsActions.changeSetting({
+            setting: "passwordLogin",
+            value: false
+        });
+        console.log("onRestore");
     }
 
 }
@@ -476,22 +461,5 @@ class Sha1 extends Component {
 }
 Sha1 = connect(Sha1, connectObject);
 
-class Reset extends Component {
-
-    // static contextTypes = {router: React.PropTypes.func.isRequired}
-
-    render() {
-        let label = this.props.label || <Translate content="wallet.reset" />
-        return  <span className="button cancel"
-            onClick={this.onReset.bind(this)}>{label}</span>
-    }
-
-    onReset() {
-        BackupActions.reset()
-        window.history.back()
-    }
-}
-// Reset = connect(Reset, connectObject);
-
-export {BackupCreate, BackupVerify, BackupRestore, Restore, NewWalletName,
+export {BackupCreate, BackupRestore, Restore, NewWalletName,
     Download, Create, Upload, NameSizeModified, DecryptBackup, Sha1};

From 211b26f0d30a838b36422eb5c144481b5495c95e Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Tue, 10 Oct 2017 23:25:22 +0200
Subject: [PATCH 40/82] Fix

---
 app/components/Wallet/Backup.jsx       | 1 -
 app/components/Wallet/WalletCreate.jsx | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/Wallet/Backup.jsx b/app/components/Wallet/Backup.jsx
index 2d75d2e17a..66d8bea983 100644
--- a/app/components/Wallet/Backup.jsx
+++ b/app/components/Wallet/Backup.jsx
@@ -136,7 +136,6 @@ class Restore extends Component {
             setting: "passwordLogin",
             value: false
         });
-        console.log("onRestore");
     }
 
 }
diff --git a/app/components/Wallet/WalletCreate.jsx b/app/components/Wallet/WalletCreate.jsx
index bab8443cf0..8c2a94e64f 100644
--- a/app/components/Wallet/WalletCreate.jsx
+++ b/app/components/Wallet/WalletCreate.jsx
@@ -8,6 +8,7 @@ import WalletManagerStore from "stores/WalletManagerStore";
 import WalletActions from "actions/WalletActions";
 import { connect } from "alt-react";
 import cname from "classnames";
+import SettingsActions from "actions/SettingsActions";
 
 class CreateNewWallet extends Component {
 
@@ -61,6 +62,10 @@ class CreateNewWallet extends Component {
         }
 
         WalletActions.setWallet(wallet_public_name, valid_password, this.state.brnkey);
+        SettingsActions.changeSetting({
+            setting: "passwordLogin",
+            value: false
+        });
         this.setState({create_submitted: true});
     }
 

From 1d149692d0cda29aa5a8cc7232362eea3fd15b16 Mon Sep 17 00:00:00 2001
From: Chris Beaven <smileychris@gmail.com>
Date: Wed, 11 Oct 2017 20:35:07 +1300
Subject: [PATCH 41/82] Fix development server issue due to hot-reload
 rewriting (#555)

---
 app/idb-helper.js | 8 ++++++--
 package.json      | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/idb-helper.js b/app/idb-helper.js
index 4421e2ba5d..be46c860cd 100644
--- a/app/idb-helper.js
+++ b/app/idb-helper.js
@@ -109,12 +109,16 @@ export default idb_helper = {
 
 class ChainEvent {
     constructor(existing_on_event, callback, request) {
+        // Assigning the constructor arguments to work around hot-reload
+        // rewriting breaking the scope of this.event
+        this.existing_on_event = existing_on_event
+        this.callback = callback
         this.event = (event)=> {
             if(event.target.error)
                 console.error("---- transaction error ---->", event.target.error);
             //event.request = request
-            callback(event);
-            if(existing_on_event) existing_on_event(event);
+            this.callback(event);
+            if(this.existing_on_event) this.existing_on_event(event);
         };
     }
 }
diff --git a/package.json b/package.json
index 78da38cb99..f739b01ae3 100644
--- a/package.json
+++ b/package.json
@@ -150,7 +150,7 @@
     "react-dom": "^15.6.1",
     "react-foundation-apps": "git+https://github.com/valzav/react-foundation-apps.git",
     "react-highcharts": "^12.0.0",
-    "react-hot-loader": "^3.0.0-beta.6",
+    "react-hot-loader": "^3.0.0",
     "react-interpolate-component": "^0.10.0",
     "react-intl": "^2.2.2",
     "react-json-inspector": "^7.0.0",

From 8be82a6eabf8632b6ab44eab0134cb2eb4e72f16 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 09:38:07 +0200
Subject: [PATCH 42/82] Remove optional assets from portfolio, allow right
 scroll

---
 app/components/Account/AccountOverview.jsx | 25 +++++++++++-----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 8f7eb622c3..ef91645b73 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -48,15 +48,15 @@ class AccountOverview extends React.Component {
             withdrawAsset: null,
             bridgeAsset: null,
             alwaysShowAssets: [
-                "BTS",
-                "USD",
-                "CNY",
-                "OPEN.BTC",
-                "OPEN.USDT",
-                "OPEN.ETH",
-                "OPEN.MAID",
-                "OPEN.STEEM",
-                "OPEN.DASH"
+                // "BTS",
+                // "USD",
+                // "CNY",
+                // "OPEN.BTC",
+                // "OPEN.USDT",
+                // "OPEN.ETH",
+                // "OPEN.MAID",
+                // "OPEN.STEEM",
+                // "OPEN.DASH"
             ]
         };
     }
@@ -300,7 +300,8 @@ class AccountOverview extends React.Component {
                             <td>
                                 <LinkToAssetById asset={asset.get("id")} />
                             </td>
-                            <td colSpan="4"></td>
+                            <td colSpan="2"></td>
+                            <td className="column-hide-small" colSpan="2"></td>
                             <td style={{textAlign: "center"}}>
                                 {canBuy  && this.props.isMyAccount ?
                                 <span>
@@ -471,7 +472,7 @@ class AccountOverview extends React.Component {
             ]}
         />;
 
-        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td colSpan="2"></td><td style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
+        includedBalances.push(<tr key="portfolio" className="total-value"><td style={{textAlign: "center"}}>{totalValueText}</td><td></td><td className="column-hide-small"></td><td className="column-hide-small" style={{textAlign: "right"}}>{portFolioValue}</td><td colSpan="8"></td></tr>);
 
         let showAssetPercent = settings.get("showAssetPercent", false);
 
@@ -493,7 +494,7 @@ class AccountOverview extends React.Component {
         const hiddenSubText = <span style={{visibility: "hidden"}}>H</span>;
 
         return (
-            <div className="grid-content" style={{overflowX: "hidden"}}>
+            <div className="grid-content">
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
                         <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">

From 733e8552b2e43c64e4622b4e631ffd88bcc406e7 Mon Sep 17 00:00:00 2001
From: xiangxn <xiangxn@163.com>
Date: Wed, 11 Oct 2017 16:01:48 +0800
Subject: [PATCH 43/82] Add an optional encrypted qr code for the private key
 (#542)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 为私钥添加可加密二维码显示功能

* 为私钥添加可加密二维码显示功能
---
 app/assets/locales/locale-cn.json    |   5 ++
 app/assets/locales/locale-en.json    |   7 +-
 app/components/Modal/QrcodeModal.jsx | 119 +++++++++++++++++++++++++++
 app/components/PrivateKeyView.jsx    |   8 +-
 package.json                         |   1 +
 5 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Modal/QrcodeModal.jsx

diff --git a/app/assets/locales/locale-cn.json b/app/assets/locales/locale-cn.json
index eb900fba8b..778b0f679e 100644
--- a/app/assets/locales/locale-cn.json
+++ b/app/assets/locales/locale-cn.json
@@ -1155,6 +1155,11 @@
         "approval_remove": "同意移除",
         "key_approval_add": "同意添加密钥",
         "key_approval_remove": "同意移除密钥"
+    },
+    "qrcode":{
+      "label":"二维码",
+      "title":"私钥二维码",
+      "input_messate":"请输入用于加密二维码的密码，密码为空表示不加密"
     }
   },
   "init_error": {
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index d0f389ba64..20a3e5631c 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1187,7 +1187,12 @@
         "key_approval_add": "Key approval to add",
         "key_approval_remove": "Key approval to remove"
     },
-    "ok": "OK"
+    "ok": "OK",
+    "qrcode":{
+      "label":"qrcode",
+      "title":"Private key QR code",
+      "input_messate":"Please enter the password used to encrypt the QR code, the password is empty that does not encrypt."
+    }
   },
   "init_error": {
     "title": "Application initialization issues",
diff --git a/app/components/Modal/QrcodeModal.jsx b/app/components/Modal/QrcodeModal.jsx
new file mode 100644
index 0000000000..e028347e43
--- /dev/null
+++ b/app/components/Modal/QrcodeModal.jsx
@@ -0,0 +1,119 @@
+import React, {PropTypes} from "react";
+import ZfApi from "react-foundation-apps/src/utils/foundation-api";
+import BaseModal from "./BaseModal";
+import Translate from "react-translate-component";
+import QRCode from "qrcode.react";
+import {Aes} from "bitsharesjs/es";
+
+
+class QrcodeModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = this._getInitialState();
+        this.onPasswordEnter = this.onPasswordEnter.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onClose = this.onClose.bind(this);
+    }
+
+    _getInitialState() {
+        return {
+            isShowQrcode: false,
+            keyString: null
+        };
+    }
+
+    show() {
+        ZfApi.publish(this.props.modalId, "open");
+    }
+
+    onCancel() {
+        ZfApi.publish(this.props.modalId, "close");
+        this.onClose();
+    }
+
+    onClose() {
+        if (this.refs.password_input) this.refs.password_input.value = "";
+        this.setState(this._getInitialState());
+    }
+
+    onPasswordEnter(e) {
+        e.preventDefault();
+        let pwd = this.refs.password_input.value;
+        let key = this.props.keyValue;
+        if (pwd != null && pwd != "") {
+            if (key !== undefined && key != null && key != "") {
+                let pwd_aes = Aes.fromSeed(pwd);
+                let qrkey = pwd_aes.encryptToHex(key);
+                this.setState({isShowQrcode: true, keyString: qrkey});
+            }
+        } else {
+            //notify.error("You'd better enter a password to encrypt the qr code");
+            this.setState({isShowQrcode: true, keyString: key});
+        }
+    }
+
+    onKeyDown(e) {
+        if (e.keyCode === 13) this.onPasswordEnter(e);
+    }
+
+
+    render() {
+        let pos = null;
+        if(this.state.isShowQrcode)pos = {textAlign: "center"};
+        return (
+            <BaseModal onClose={this.onClose} id={this.props.modalId} ref="modal" overlay={true} overlayClose={false}>
+                <h3>
+                    <Translate content="modal.qrcode.title"/>
+                </h3>
+                <form onSubmit={this.onPasswordEnter} noValidate>
+                    <div className="form-group">
+                        {this.state.isShowQrcode ?
+                            <section style={pos}>
+                                <QRCode size={256} value={this.state.keyString}/>
+                            </section>
+                            :
+                            <section>
+                                <label className="left-label"><Translate content="modal.qrcode.input_messate"/></label>
+                                <input
+                                    name="password"
+                                    type="text"
+                                    onFocus={() => {
+                                        this.refs.password_input.setAttribute("type", "password");
+                                    }}
+                                    ref="password_input"
+                                    autoComplete="off"
+                                    onKeyDown={this.onKeyDown}
+                                />
+                            </section>
+                        }
+                    </div>
+                    <div style={pos}>
+                        <div className="button-group">
+                            {this.state.isShowQrcode == false ?
+                                <button className="button" data-place="bottom" data-html onClick={this.onPasswordEnter}>
+                                    <Translate content="modal.ok"/>
+                                </button>
+                                :
+                                null
+                            }
+                            <button className="button" data-place="bottom" data-html onClick={this.onCancel}>
+                                <Translate content="cancel"/>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </BaseModal>
+        );
+    }
+}
+
+QrcodeModal.propTypes = {
+    modalId: PropTypes.string.isRequired,
+    keyValue: PropTypes.string
+};
+QrcodeModal.defaultProps = {
+    modalId: "qr_code_password_modal"
+};
+export default QrcodeModal;
+ 
\ No newline at end of file
diff --git a/app/components/PrivateKeyView.jsx b/app/components/PrivateKeyView.jsx
index c580e7d770..498c02e90f 100644
--- a/app/components/PrivateKeyView.jsx
+++ b/app/components/PrivateKeyView.jsx
@@ -5,6 +5,7 @@ import WalletUnlockActions from "actions/WalletUnlockActions";
 import WalletDb from "stores/WalletDb";
 import Translate from "react-translate-component";
 import PrivateKeyStore from "stores/PrivateKeyStore";
+import QrcodeModal from "./Modal/QrcodeModal";
 
 export default class PrivateKeyView extends Component {
 
@@ -58,7 +59,7 @@ export default class PrivateKeyView extends Component {
                             <div>
                                 {this.state.wif ? <span>
                                     {this.state.wif}
-                                    &nbsp;(<a onClick={this.onHide.bind(this)}>hide</a>)
+                                    &nbsp;(<a onClick={this.onHide.bind(this)}>hide</a>,<a onClick={this.showQrCode.bind(this)}><Translate content="modal.qrcode.label" /></a>)
                                 </span>:<span>
                                     (<a onClick={this.onShow.bind(this)}><Translate content="account.perm.show" /></a>)
                                 </span>}
@@ -86,6 +87,7 @@ export default class PrivateKeyView extends Component {
                     <div onClick={this.onClose.bind(this)} className=" button"><Translate content="transfer.close" /></div>
                 </div>
             </BaseModal>
+            <QrcodeModal ref="qrmodal" keyValue={this.state.wif} />
         </span>
     }
 
@@ -111,4 +113,8 @@ export default class PrivateKeyView extends Component {
         this.setState({ wif: null })
     }
 
+    showQrCode(){
+        this.refs.qrmodal.show();
+    }
+
 }
diff --git a/package.json b/package.json
index f739b01ae3..7819bf059c 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
     "numeral": "2.0.4",
     "object-assign": "^4.0.1",
     "perfect-scrollbar": "git+https://github.com/bitshares/perfect-scrollbar.git",
+    "qrcode.react": "^0.7.1",
     "react": "^15.6.1",
     "react-clipboard.js": "^1.0.1",
     "react-dom": "^15.6.1",

From 38906a6ca25070b589d5e6e912182e1a64bf4b6d Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 10:03:09 +0200
Subject: [PATCH 44/82] Add an image for QR code, fix some styling and
 translations #444

---
 app/assets/locales/locale-cn.json    |   2 +-
 app/assets/locales/locale-en.json    |   2 +-
 app/assets/qr.png                    | Bin 0 -> 9976 bytes
 app/components/Modal/QrcodeModal.jsx |  75 ++++++++++++++-------------
 app/components/PrivateKeyView.jsx    |  11 ++--
 5 files changed, 48 insertions(+), 42 deletions(-)
 create mode 100644 app/assets/qr.png

diff --git a/app/assets/locales/locale-cn.json b/app/assets/locales/locale-cn.json
index 778b0f679e..e851ec2d54 100644
--- a/app/assets/locales/locale-cn.json
+++ b/app/assets/locales/locale-cn.json
@@ -1159,7 +1159,7 @@
     "qrcode":{
       "label":"二维码",
       "title":"私钥二维码",
-      "input_messate":"请输入用于加密二维码的密码，密码为空表示不加密"
+      "input_message":"请输入用于加密二维码的密码，密码为空表示不加密"
     }
   },
   "init_error": {
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 20a3e5631c..ed4ec12965 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1191,7 +1191,7 @@
     "qrcode":{
       "label":"qrcode",
       "title":"Private key QR code",
-      "input_messate":"Please enter the password used to encrypt the QR code, the password is empty that does not encrypt."
+      "input_message":"Please enter a password used to encrypt the QR code.<br />An empty password will show an unencrypted QR code."
     }
   },
   "init_error": {
diff --git a/app/assets/qr.png b/app/assets/qr.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8769d81c44fcf8f0afbcc6c03f059ab5b26aeff
GIT binary patch
literal 9976
zcmV<UCI{JxP)<h;3K|Lk000e1NJLTq003kF003kN0ssI2|9}Dm00009a7bBm000XU
z000XU0RWnu7ytkO2XskIMF-&u3kNX@uet>e001BWNkl<Zc-p;vd6->QmG4@6?{n_G
zRTW4A_M?ponlOZdB!pB|5&|Sq=}$qysr|I^wK($R*|ZaB2YmLkpQ3_8^F%>W^z-2p
z=T@A3ZJUJ5fy@D-0<EGVWT@$$v-e)>{ju&{wd+*XO;U>YkNR$I&e>=0wb!(NYdHAU
zx4w1DmMzY?5JHw^Ap~QLF@}iXcs|T*jEOOhjErpAvW1xe01@SXiO3k!*Vot6)8oDO
z-f!BpDZLjF<r?{}x642EN+R03ckk6#Uu}#5fIQDb2+W-4`P{j4KmF-X%Z+>X?0MrG
z-&n8LiAdHZPw6~=Yi$St0F(mqXl9Nv4h#&qZQHi3U%y^{jWHsk%sZXpv3z87nfK`E
zXrs}P0gW*-R9TkWw{N%BdhgRI3YBF9{atR64U_rE1&Da)(4lSHwt4U6M_Hk@w%KgP
z7_GI;JUBRb&pr3(#B``U&(o(*B$n<_j8SJIlR-qMQ%UcUWgi!@bo3BHy<V5^@_3nX
zp65hVVOZT8A(`@#JYC7BUl7q4(`+_%Rl*A~Mj@I04gk(M9a%T*Se8(svd+o~b<$mx
z$4}#9jFI^vVhAC|7-JObR7fw6ODAWo6+)zf$;{q+9Y=<eoe;_@6^t>54js}5Ip^fN
zOeV%C1M22Y{K(T~K>5h->W(6!k+I}gp`tv4kMkq9E1{ip)>><AmSr-JJkM2>RDuA&
zdta;7bVANKM9i}6?6c1XfGo>o99c;SLAZm68jVI@U!M>$#<*|azI3xiKJq;8@9&ox
zdhg4!oNE5MD<K3KaA;^q#?)(^Oi0wEimP+(c*RheUp29cn6);>D9WNDhQinSS1&Ne
z%$PAlZWqO`oSWyl3^+PEs*)nAP&P*PK-g9&E4obianku$m`)h>$dMzeu#7QIsF+?S
zJbb(gKGlUPM-^Qli=22%<wv<isg|k;A}WePWm)7))|q9Q8YsO$rlGV}s&%l5I*9C_
z5Lcwlq*_p}JF1oK@FZm%(Ls|cDP6p(Gx<f;v)riSP*HXwEOO<@$cSDnBdD0Gbyg`+
zvUZrfXn=`~VvMoYj(HQp%;|=A{#006zw2)3KSkMB+!39YC>M2HMDY>P=RWtjEXzcN
zEm*KX$6T>ug^U(LxbMFEWaiE}C98UE@)YmAK6lfmO;asLG$SJR_4SETN?pY<o%LjY
zDi&S2FXb%Ve4U?=Om<Z)fI4o<o2rTQyNobVu8(WB6|opoP)|0cgrU^=lrOTG`pZP;
ztFmA*L1JNr9KtW^BFG@ZhI0KhbcibQsr0pZvWX?n*3DOG5{05#vceiVZ@p6KB1&B(
zRIgM?^xliq|LHTY=##$$u~aG4YBlj5)XK=GC<<YOlyDuGRM}@_WaOTE?$N=|J@;I3
z>zs3`0X<&Jp3<mt<6nrgQl64+7k)`qdu4w5zZJRAak{#?)XPD{?(S~+uc9cXVa+EJ
zH1$IMaylz@8dQ<X=BEc{CB(#|i5#0#pF?f8jG0>7JkS3Woz-dM{{q%f>7u8oRE3Wn
zQ<H<C_{OTU)DcyKC<d#mt4m!3g_Y#&Qenem7siyeD;zo<&Jstwf>m{P_EJQlGAHri
zCyL?X#fw#7)p{c0#*G^<yzoK=g^r3E9iy^Ou`_jR{|ua!uAzcM9Sdh2BPV8Ara(=~
ziS>G2?WX!%x+UuFimz*oQDm(%NT=hZ$BfF-+_YsX-SeZGF!_5_vMM{M=2kpUy{e)p
zWIYOOih@(-Ez44&K@nj&V|PBr>6p44@j{M?SW}TeIbZymqpDK%u=K{xr&+lygfKij
ztWd9W&U-JXJmHiS^ODc-@UYBT+<mnYS(eEpg@PTnR@ifJa8T||UAdzWYbsHnsH!?I
zUaxn~jf{+lfE?8-0l>a}`;?0pELd>gefNpn_4f8EfzngAY+lO9ax4`Zi66Uc*|N^-
zlC^{oCY~au$ypVUzVqUB!3tV+7F#{s9XWDD{D877>-D;dNv&3^=wKnDo`=-$l|xdV
z=ZaNKb?8$*6~Rx>27d;fC38APomIK_s8%VRu0)$sbj5owu7j#@MM0F-;yTE|NOYV|
zc&a&w<5q#!{|p{{iWVG;^HM=6j~Zl?84K1f{-^j^a=Qw$dbX+GEAx?M%U*VMbt&M{
zVYd`tRnc?K_4M?NyJ*#_RTUrSSoXhz*w$(_Q7DRbs`Dc5;zVaJ1^#sc;%CV?J9g|a
z?M*p%;Q}86Gso!fS-)0Ud*Q-`>hx~fv?;ay6P>u@{W#}Vu3TvpMOB|=8bQPKxKI>D
z2tmY05f62moO5z^Qx-_=REi6$2QP@Ikk?w<)zxK<u&T?mx&RUqjFG64lD=NAr@PVt
zfIlh|$goD_Ki$}A!^#TCI_Ctf)(}>zO2o9w-iS8IvP?8|iqceI+stJZ%PW!X3JxxW
z6W!EoHq&tA^cI!ksP5pwgQ*hHjh#kxM`$6pd++4|vH<b!#NSaSN(rj!uLa;bCrcIc
zpJiDYVwTm2!r_C5VhGN;EX!<`i)gF<7E>T&3UBHOv~o&2E(J|Q2M-=Zu@_>GD=_Bq
z5=*vSrC5YQD3yA5`cLm;mf1vv*?Yfb%Qg*(A31VFFy%bY2L_fI14U8PYQka+V2&I)
z^1uW8^E@9J8JRtM_PlxXbU%bx&1O>!g0kfFLVVu)JkL=#;m-vvriV2ZnYC-zidrel
z^6azEo-tzvF=m-Vgh<gE8_A0%!nT1{ei1*50Vqamktv`t0EQU>kzx!X)M~Z#U<3dR
zFxnh#)Ef*800>A-h-d((y*f;BUX{VlK*AJbMUh0=+o7SMyY9N{D_{A_kAM7Ap<tfp
z&1O?J*%)*FlKvOG;00G*b=90Xe@#p=`pjiM_}oocwnS@y4KPFez`y*<cfb2xv=+fe
zhTLUEQ3(I4>x+obyY%_Jy}g%Tez^vFVvKo~<MI1RW2B(=N6!$`h}}y7e6%^p?0@~6
zhhF-!D~ts|Fcv0;4_ePgi^c(%rOTJ?yMI4%94$tOqoVBTOk{rE7tH>3ul=tGfCh{K
zFk>k$8Xj(`KLq0}AiV75e|zxoAz}^`BTsK>ttml&e}5$w-PzT0koC?#hnWNU$ddiR
zOdN_s%;oj(eh&a3f~Zl0xmuGn_=<=YAhQm@n5+wI?T!EaADfXqb0j9_X0yp0nIkiY
z(4v`VA4ch#*SyFYa0qn-<7TGb)A)mzF~;fNJHPzZ!0efcJu^p7%uLLIV;Kr27S?0t
zwQJYv@+Dq5mg~^f)um%ABGJLgju4;nl&6S7F=)U505Orx>WddFx^LIsTCGtOqsCbl
zj|aG~ukX3feXckbMD)|2{&efst-%)|25W8fO*HP-PyX+9KVQ3j`&P727QSAq0YKR-
z@_Nl$Bm#!u!8dYoN}yhMWiwC+m1CVE9JMSf%EAB|14Qu3SG;0)wE3#PztR{+0Aoe3
zi4W{jH$ZL|x@+!K>$7_G>NM^o4rFIBUcP*}_bpkW=zTfDu{rP5IT=D`a{vbh0pZ!t
zx#WA_|FPKqi7dT)_wJX!{ACExm0JWrw64~3%G2it=D=K(ZQnAe=tR$+17CgB<t=eT
z_}DFXs<cW3Ot6}b8#lh|oogEPyp}r|Jg;@5YaDp^(ID3o#~341U=|)zCq`2ejWNrY
zFCUjFbn(R(R}PS!!}rGFz(C*FO4u_uFI;|}1*qE^f&*|pGfw<}Kl}F(*#}NtYMG5V
zD`oJ^@u6SrKW)xa9Do%Ow_O7(RtDxGG6|K5nF3SrzVKXf;MZRHd_>IaH30MekKU20
zwz4dfjfoumOD?~xkvUNbU}~!_xy&;MioR^d=!rQJM`BfFA%q<}cBs>L&N=5)iIqAO
zshXek0|-l(_J<HSa`b`8zxUm5&kP_y?rH$pUqAKKKRot$Nl~UEYtRAppMg0>Pkw~`
z@C8d2bm!KhLz9EaKXl_K0<&+csu)VqU!yd_f!}iV%Ucity8rRfF9@rq%qs{dQ(*QS
z%kvkWQ+GDca{vdn_UIEM@@QsH%po#GX5uw#)`$!)TC_+KDJH6UBe;)xp+a4CBPL0p
zFqR0cv0w-}KKkolf8YZ*1_A~sL!32x_JhCp#q5)30|fvw2#U9;QpmE5h!EHqgD#82
z>+acj$|<J+2cQy|)~tEQ;UmKlP&B8pR$MrT4gw613<-maZY|4FPHaU{h^iG-D-tmQ
zAb#%l&&CjaSppEmxN*~Vl5--F*ab8INcDPM4n}guOq0CEK{S=)&culBcm$PeS>9|8
z0~2O=?X}mUH2{EF4hTPAw~m2`$ypO)2|!~0B&kdUuw~r=V`Knl^9E$u&;H{-EJ97(
z(n!}`cb&5U28ba90&MGJ!}TmT$P^*~XI5CIg?0!m(}Fszi$nmhVDX|X!>*b`AOO1W
zzP%KM_-XWnD&fd9H*t(ug2swLQ9^bI9~rPjP_Nej`H9CK`}(*3Ed*k49K##0x#o<s
z<~8aWA`+9cW7!F^B#E=Pd=_S7Edvl>2=vsaKkb@p-oO!nBOu;>+igBDF))I4ju}C$
z24V=ov}4;u0g@zG&9NaO2DHwR_W*F-!gGrvI0OV38X7?h1Z>)<DKpFILs&!zGAX-^
z%l6hF`<OR0ZbSe8$~g=V19~X3TRwJ!vzY?`2w=KDeA7(^*>H4>mNVd1GHzvmT7v^Z
zBm_bxw9eS<eee69qKPd;g!q}Sd^h7}03ZP55)n&?U;&&B3{GsnH5%qgnF0|F0CQoo
z2C!?#yK4q0%WPm^gvbmG7651reMiK#YuAcwDZV71fq?;&=6R>NTZ(O^>GMPcKDb&v
zas&(C_{O)&;2FTW{PGvSq~@#z1OTR%;B-1Op+3<XGyu@u-5BUQr)_HRYj=GG&{EqM
ziZMEHa#XYyjm?0Kg1>^y2+y{X|CkIkC>#N>d-m?Mrp~sAkS$!$>x9nY$|9fv0BkfG
z0!*ebmWC#+wT(u@bj}$}3m?+#ev4Uo<cWRv|0jUStc{Uh|N7Tj0}Nxxkt}n{GZ!!z
zW|lbt0N8qV`Q?`Zv{cE@fBHi}>kyC$0IabF00<BbMJUS>&@iLoJSqn*xD|mS8{6~H
zFE%tsYMz^c3}C*j|2$#8_EJGk)@iD0ng=}Q21p)!nst}vMpcq;H21J127s-bH;8w{
zjDYz?E0(9vIF=)7`cTo5&w1`@3q(xT<uE$@yFVVr)+QqWL<%j~8W7PMW7C9BNGdX9
z6A%%wc-M9B2Pl9uu%>rO|1;*yL}1`Hk=p90EK5y3*JEFr2M?{2Xp#z%CazS%b1mnd
z!8!+wyLWH((Et(=oqXD}y6VO-07W?y9u)|YD+~&f1<VM{XU*@m00vEr!8q9Sz%K#7
zv^bQUaeytJ$n%_{kD(Mv)S8>5Ai^LPcYg6pU;ozk*#H4UtbO>yA4C8H>}*bv#bC**
zZ@A%xBS(&iy_Wbc5$)Ntr|LRP8l;(uvz$dR1`vP$+lM0<KtSMUopGiiFqnpLjv5^p
z&wU1&T{dHu1#p=GMlMJH^LKx=&}LpD9@}jyi%|e-jOT?kz(WDv|AFhTeD$01?uI7-
z46l2`n=e^85Tge$00vMLtPslx&&nA?SWIJ=>QOtXET}-EX$Vtwe2c6^%`yPvqrZJf
zpgJU;dGbjNfS^%NFh*|d0Du8AA&ReH87+VTa3^+W2b&R$vjl^q<rt`h$iTp0Gh>a7
z6zes6;Ql=uHf#{>F7bV1%mWWRuzvmeJ3jxJk&(biL&LSK%l*yj7k}d8?{y3$TgV_*
zr4ox4xJ|R?)1Zkl#%YDdR9PiLDOGg_Agkp7Ff@D^z<>h|aKg+J+o39Iu?!ytK|}xm
z3lIT_0T3+!M$a>6p77Xj9*4{tf@UGaBD4;HBZLeg#uzCY0AIvAZoBo1pT03w#tQj6
z1jHPi;W+%h_kL>4nyW1Y@Qj%uh8V#)U<QLiJ=Bn`mYE@<6yc2p2{&!pRLL>ZP-vQU
zrhpux32_w26-WS(L#?oYO=M^lXq9CN2#iNj^F)GsL7<3$%s>Rz8TMXK9}Cdk-3`o4
zqTmby3xS0xas&v?F}VW<1V9@C0hoYU*Nl_j@s7708hm2SnyXtIXc55}gv_-@Y>8x>
zKVpn)*RE|e8UijXSg;`V4PDBIX(@ny5u{iF|G)&q5M!g>m1nLjh5_O5!N<jNhY<Dr
zfyOY$DHWFiKnOm%EDyxSfJK7f4-E|&Yaqq|(9_)oC=MntgT;1`k;z&tBZJ9_idKY$
zTE&0X*$~3)lTNwiQ=fe4ORf-+DaxXr*NDA=tOI<k08GV05U1Cv14TrFWTnM@Vo=qr
zieFO8EI9krr=8~gMgWu7;nxp6L=1@5IDz6s!FS35K?EXlSq5ON0UtcGcNrfUA$A#{
z@eHTVIVJHk5P$)|Wf_AB5uAk;tDduZ#R4D}b+dW%#_#;wcVh_7!V`}@_Nu>o$*rIM
zn;-t*duXYa*MbL^QRkci5kUEyrZkD)>-O#2_xR(FOBin9!i9?b2`dSWwr}4qWNyX&
zi2>;8r_D1!fH|}O<%9bffg)Rr-j{i9vE`ui)Ls?|hG`7M2#D+)KJ>uu5`e|-VRrg6
zPmKT$3;-cwgy^VMpu&vCWvefF-uvG1dSbFDT#NwpPj7$6O*ehqnCMIT_n-Xavgg0#
z?jL@g2y6xn+`&SZWofNF>7<huE?iiv)oQhxCO%th&p6`@7#J9kq#R9MRXnRwYNUaN
zr2~B&!_R*5?K(ou)WHBi_oIJ2GB{dBCIQYx4SHWp6#@w4iGn~}MM=ytG#~%oH*Xi4
z2&U#{{8eBsNPs!d%$`g3e9ddGK(qi3O!m*8_(Eg~6kBK?$L8oDlfV7eTM(hq=mu~A
z?js-hln+c?`dA({HX&YH1>hC3nC|Xwt&*w8pjMZrVhjcyFd+B!uV4mb1OyB8fA9KQ
zy`FK)bpae7f}czbZ9CNqY$l~C?uS44DS}00Yw-O3WtLlk4+w1(1Y61RXbdoi5D?I!
zNDz7NYxS-e={0Y7{dI5uZ_Uxd7y=CM{HJ$4`uoR<=+R^yLS7nCPm{b<!4r`YN~vF(
zCNs)k$%oQ1TVOdTaaYgmv(KCpnE}B-yzR5Mhqf+E1Cdj^q-ae>(E}0yL?+A{pa0yQ
zEtfr(SHAixh)tGb5%L&~fekQl1g1t_D~m$GnJlXT7zP92KKQ?GIQ?03GG_oW#Gy+s
zz0}#R4#`f&7**M6&Uxx~nH1JgRFjA{Z{ECN!-nnKx9{J-fByXWOO`CT;DQS-xZnaX
z#xMY4QTo@v_A1vpjqtu5J9h5e6DewuP3No?jv$a0V$1k`{VQKBJOC0h5z~uabh*$`
zSX5nEA_6A4t0<b{cDIZ#fDdGy3z5+^zWMDhdmn%-px?b`*XM7)i}>hi4V4_J^l%O<
zSFWt2$xoF()lPeM%a>im#8i%s4m~cQ3_=c=pSNV$XkgD=GB?XnX3tclh<*z2duAUc
zlvgr0nafj7o@D`Stq$leyW%Cp>;n_CkAX<khYyk8{F*Bywu4}<|M=&p)IG$^@lCIO
zDFSo>0Q8uw=l3JT94Yz`f`lnT2+WaVnFc;m#XSy#@0_t$siZN+SZ9bs@DW{B@1F6-
z*S*>~K!}KV@7Ap!yXj-%LgiUKMg}zM&{ir2EPyiz0KP1N@h$)G4^KRCkP%`Tz?d6u
zxIy>{0i3aj_PA3M5Fj*f{@j;l)nNo&-INsgHCMhek|A)`+86@rL8X1}7agMFRUNc5
zXNfLLX$%NU`uo~j=Y8|ALof)|W@382efJMMb4eU1PRs-lTSG+5u{k=-<eAGa-EljL
z7DESEd(~^+5SR;Jk{Gy=(H3JJ4`&5t-y9?^zwoJ>08GsQxGq5Vv-O*Xi$KgoG%`HM
z9EImK%P@soDxWEnXL@^kPdMQO02m$~-nDDj;NTz;_4M>CI`7=`&O5IxD9a5H*sON<
z-QT?Q(ig?(oylCDU4H3hU%d1Gyz&))E79sS{Y>*{nHiXBc?JMC-tggfzx#T@^?+gK
z$$xd*ZMVuc3yf2%goTflwFqlH7>8bU^*{dW&9`jZ`>PyAJi6z-;EF?!|26_R#70*a
zFoy_;@cZ9A`p6@XXwj_*#Ecm;^u*JNvy_`e>yJf;xQI-|9K6VO$=qD?_BYq8$xSQ6
z!Mgg&RnPt7<A<rO>C#*eVXn{|esJIJg}rChokf6Jt&!Kd0kS>&9}di(DRLR&Xrv;P
zz8wTT4$dNuftjf!=3njI=A3bIdN+-0uY1p^ADfyeuj{V6t`e-z^SrOG?^tz~WTR;g
zM60L;3=mTQ<G?vb%mDU=k9_pXD_<FjjR9kTqF=v$?a3$2df^MNxZ{pH_U_%Q@?Vza
zwr$&PzWL_GeM`=mf6o2~50rsiRx1i$mc@?UyXT+zj8Fz6L^lrD*v!FnG8~NsDk;NQ
zKK-mkZ}|I{o6P10OlCgukq<rm@WUap0NWBkJmG{Bq-%@9q?7bw>A+cP0n_Y<7)mB4
zVqzwakwaU^%a7mqA!jjnt&8(|EyYVUGgHro+G)nQ{M6It-GAU=&m3CuXC|W2(NT5H
zr@>iF!d!mT2QClQYnhyHT~<4@cY!4BP|Nnk_rCYN8lctq>9S?Zj)}9@ty{No<HoI9
zx9-}tD@CS$`QR_NY~Cv5jT8~kItL8EeC^xbvU~T=x$~asj0J#D781fq8!L^qj*ug!
zWbZ_N_~D1X@y)OM0M<gJR+Ob)uM;p$i?4tJfw2Tdbah*D*8SOA{*}=*G824p|Gs^<
z-uf8;2n@~{px8!Df<mE_)UaK2(M4&+h_FfO(@)IJUA%a4HPbBl?tSsYAAbMY&tB!S
zv6w&_J=97iLF!#Q>;R^=aLMw6M@A))rt~dtYWZTsWiiTJzV515VhcRX-uJ<eb#Sw&
zHKjllA{EU3{KX3Z0j&||@DG1{EJ#iU)AiS1uZ??j$xD|m9cK+Clmz3uFje|QRWjYv
z`nI$%PLMC>+(j2%bjc-`0Kkua^rKCiw(Q-z_gBCAm25zkWqo~p^XARF<dWw+ZO)v&
zzVr9&xgP--$XVF2b<0U7o%Ho@eC>soKF>J`fUvbT#1a^@JZB1P*1Yo#S6>s!1hCII
z^|UD&i;0Lb+p0cCZ~%1o-FN@$k>40&%CZ~-6%aI;K1B^CIex5Oy;|dloER^?r_v3^
z7&9<1FgiLqX>w&*wlZG4FXYSkG@#Z|-g{pZMT|a%=G)(PZEL3yt<9{f1GqO`b8Rah
zh)FhId@hP!hHb$W@#txfL_`$YQ}RBxeRqmJ2C?kK{GRu`r&5j~nP}rU>-5u4FUztl
z%R`3_X`=;e?fK`QpX%eZuUubWUz)bAzD4_V-U_$K1JpPO+M^T7^BjOE@<(pGan-6-
zSG?c~Vut7=L;$$ulQ)0oJKtWn;hs}YImH?i0W3hE=u8F#M2r>?C^OW#R;!&x-pULv
z%QDaFt=L48xGcX20;)BiljM9%%*<0)D0PlfCXyJ3l%1sRnEJlyccGC!LdR@(vx+e^
zV`%>F*AGAQ=}&b404C4t?P!&|<4a#|1`f=T195E4f?E9I!)OPdl6lG#g}K^Es;#AI
zT>>+UHLTP<Rdkj~v(>f0L;HJ8tPc`q5ezy_V$$H9CLfIDXe8K%_EV9NZCM6mGc@kM
z%z5fBAAa~{FMBZnm1PqVjkSpI>MQ^5*(+C#3^gf41S9T^a)h&a=kk~YEV40jvsuFU
zCTBW-O$JGMs#+s0KBrd5PE7u;6!c82%WHop@1rRAc84%qDIn0wSLYm1OGp`zAjC3c
z&fR&}SMO}6j7hD4;LahCb5iJ|R>g%N_{o%UNs2Kt$<})BU6$3_r52i*q#LO<Y+4bj
zz}6VC_U_$#=+GhQeUb)KQ*bBctQh0WnKREi>#R!syT&`T+C)~Ew)-0AksvY?w#dg>
zUPq8TS}%1^QqzUZz{Xhv45DMK#SjA!IOizBlz0TQvDTm+cQ}P{MV>-OS*$oTS(cq}
z!U=Qd&XvogmEPEA#flY`63WhD_q6ZXq(yvbvx^j&(F~l4BTQ_%SrH}qtC*aA(pwfS
zS|pk%gs^`7dhK^0NwlKB)~;QvD@{}LE4kR5fDow>Z$-)!x=LfKoeREIvW{B$t9hhp
z4Zdo$^vAJ$71K&S5L{gTYAi3sk+ckXVjl>(vC(L#Q5HR$#sn)QQ{P>^$n-L!kC$?x
zN_F+54cVleP?_kc_5a2g(WYrp&bS~*l02qHAkTBjnbIC^X}X<g7Ug28)k+)TX&2Y@
zV5{}DsRGrGaFDcANz?vxYn^7x<axeu;le!6CqEV?I!goB`qvn<Zr!>`uV1iWf%G4e
z&M2DbQt8j8)41@$3#F6a@bK{7y?ccn8jZ&M`ST%Zf+7a@4}bW>0}nh<>7ZAZ<%}6K
zmMmE!T5sOGd0GM~{-9{?JkKw@@Iq1KMNvp>R9nCa6G-<>8GqKSS#a^i7b^+HCu%z;
zlYb`GN@yF}Np)75Q!bmIRtQy?CCv-lv15m5dH_gI|81a^LkK%}?o>$}7#OIa=2Cax
zKCyac-mqbViutNlt29AhYpMZY$&w}dpe<XrK)a9Lz`%e@%hV=n%}GNb3V1409JRA7
zjBoi`iKb}XvB<a(cW7v+RUtIq=A@Gx92`u$R>S!IJDPHk_G?iGXn1&7yW?rztol!)
zF+>lDAJf&<Wm0`n=|nK;M@dtbrJiy+$Cs3`)1G{)HR|=cGK>0$(i5eU(wPQ6WWyAs
zmh+QRO*TeGlf;EoR#ey$000JyNkl<ZwaJ#Gi3(C#EZihD@yZP{=T?axOwsju^XAQy
zIt}U&5Rphn=NjRS8#fB?ba!|6_V(86b<LF1FCrZ>)ZV>&4<0<2=lOvH2No?_BrR{}
z%$c)o+cwEXkh{cU+;`u7+FteG!GrhSd#@-av7XYSTZJZsuxHO6?e#M>G_-yDcA?IJ
z0|yo?SRfwtoH=v$@83T%GD1WL4jf1mFpnv2IF)>*3Zk>0rD`>8`Jmb)EwtA?JOBLi
zRR?X`wykpVm{^<z6FSLOs@>8S;uYJvWXTep+vd%iQ;np5SFT+7q<3aZMML{8XoO9S
zT54fcY*X(<5TOLF0PVS)u6$gmJvnJ<&*;>bOsA*w(H0Jqip!HuEEOCD4pZkSRgq~W
zl;&boTB@WKq!smA$s10)<E43_6N?3<x<943G&i4E8}g(#NR<5)8@GG+?!m!9Aw++F
zzZgMdj9_Q7l8qZTmSve`+2O;7ckbNTY&M;94?g(dqD70utvz(;(Eaz{uRD>x5<oX#
z)~s1)oN-2aHWEkli6@@WPUvYB++&YDwsYssvMfhNMt=L--=1^MIbsJ!Mn-n++I6fE
z=|5d(O;i(=XDRBWe56%Tdat1V^4YUzPsKaa)F}Cq=ebxOwXh;tF~+T1w^sa*ij!fC
z>F@7X$MD{J@BNGFtkj08Or;37*lblX^?JQ5%gU=h6a~?YezoZ7IZ1R@S(aKgo4SD&
z$R+gwBt$6Sk|OLO1c@a6<#blsE;wx`mm<F@oRCI3l@N_aLyy+tK&0rdNV*K}oRh*s
z^};mKOrYI~X9hXyYP2HljXt6Cz>}}D)FJNc>w|XF!W}zy=sOUWE?rtN`OG|H#*A~%
zJy-4(1tg@IIdkT@=bqc$-JPyY-eIwS|9<gBhlhu^Z{IEinl)?IS!bOk5_;l^CoW#R
zSd@C&yGT=zopWcOeYWyo)#YBbYE|VZBYV{W*izp&&1Ra0E>mlzC%ClmZ29u#^1GfE
zD_<)AyKURHN-CQCb6{X#s>GOdJ`<w^M5Jd)Ywg7sUu={vl@}Ux03Iqwyv{xUI;*ov
ziC$W7D|mqRvQ+?9(-ZY<q?n&VOsRjT0f7!cW+j7kV(Z`*7i)*l^wJ6%mwMs4^Qv^G
z*P2Shl&QjsG0K7kv=bjfmMU(S_Sk~<ODp66ApfP^?$TCwl{HVa`1-xl09vnyc1L|T
zY4>zv%#tNb)Q(j8T+0224<FVJVaNNfEC4w3%rj@soGBewckbLNVb@u+X32uHEIV@K
z$nM>{#k6&IcQ0JHP~TXxYuBzk&qXHWB<Q_AaNvLjnd<fW8E2f))zwuL#r*m6g?ZD`
zhe`RXB3Otxd-iPc0kbSS{q)me)v8qjGifJcMT=6APET_c4RS1g)}%O>eyPCuDX)p3
z_4oHHF1Bvny2(2MB_E0RrF<ljdLjKpU@leGsREU|#xVHwg&Zj$H}Ul*)ux^8$lx^I
zm6d{}>8rp}6jV_&vG?iWL(krNc&b<)eX*1{BGM`h+Ku*75mBL;2yj=NRVkjy(h#X8
ze@|7@rEh?$6#7ihtEjYmt+1QOxIRMLwraCLF*UVXO}?l#&_;`r%qQWJNsoIebt>JT
zh08RsgosX@R}ty^@4x@x!GoGtlPbuGZiGf61S6jY8lho39ZHp}=$%E278ON-h;!%8
z-M)RhO!bjR9+BD_W6aRd(4IYeM9s~fJ$vrlx$+Xf(@r~0@GoObPft&8Z?8~cczAgC
z?%j$p=(C)2ixw?P$s{x#9Ua}ieY+5$r>6&2uU<W=rkFOypzNIjn`suwL<k?o_l}gm
zOP4NH85bln%?^`$w{G34VwL742qq;1o_F4Ps&wR?7ck*1D3y#eRa^4jKe=q_(xq<V
z%e$t1tf{<_Z_*b}OchV9M8YfYZ3yi?S*n=ie^Y;Wsu$^r-l=p)OpQ+(L#Y4~=~S~U
zbEzPxA298vt}^3hvnlX#stW}1kp4Jn9A6p%rcRBvIVp-lkoB>C64pu*T6%btq4au<
zPHI0{@z>IarW##M*~C?=i`N3<Bzsw5-!ve2T*T6MjtveDidvNs`uqDEjRp~ojEtmR
z;M7YN-6ZdvQ$SssPHL`ocX#)S6)S`Uy}iBasdsgCEnmJ|6ukZ}c>nU{%SC_n_V#MS
zhMu0DWy_YO;V4<Mw5yxgHn~=-EnBusHmtwD|NjF5nbv0L13ZiX0000<MNUMnLSTY_
C#VN-C

literal 0
HcmV?d00001

diff --git a/app/components/Modal/QrcodeModal.jsx b/app/components/Modal/QrcodeModal.jsx
index e028347e43..a5bb63a3f1 100644
--- a/app/components/Modal/QrcodeModal.jsx
+++ b/app/components/Modal/QrcodeModal.jsx
@@ -63,46 +63,48 @@ class QrcodeModal extends React.Component {
         if(this.state.isShowQrcode)pos = {textAlign: "center"};
         return (
             <BaseModal onClose={this.onClose} id={this.props.modalId} ref="modal" overlay={true} overlayClose={false}>
-                <h3>
-                    <Translate content="modal.qrcode.title"/>
-                </h3>
-                <form onSubmit={this.onPasswordEnter} noValidate>
-                    <div className="form-group">
-                        {this.state.isShowQrcode ?
-                            <section style={pos}>
-                                <QRCode size={256} value={this.state.keyString}/>
-                            </section>
-                            :
-                            <section>
-                                <label className="left-label"><Translate content="modal.qrcode.input_messate"/></label>
-                                <input
-                                    name="password"
-                                    type="text"
-                                    onFocus={() => {
-                                        this.refs.password_input.setAttribute("type", "password");
-                                    }}
-                                    ref="password_input"
-                                    autoComplete="off"
-                                    onKeyDown={this.onKeyDown}
-                                />
-                            </section>
-                        }
+                <div className="text-center">
+                    <div style={{margin: "1.5rem 0"}}>
+                        <Translate component="h4" content="modal.qrcode.title"/>
                     </div>
-                    <div style={pos}>
-                        <div className="button-group">
-                            {this.state.isShowQrcode == false ?
-                                <button className="button" data-place="bottom" data-html onClick={this.onPasswordEnter}>
-                                    <Translate content="modal.ok"/>
-                                </button>
+                    <form className="full-width" style={{margin: "0 3.5rem"}} onSubmit={this.onPasswordEnter} noValidate>
+                        <div className="form-group">
+                            {this.state.isShowQrcode ?
+                                <section style={pos}>
+                                    <QRCode size={256} value={this.state.keyString}/>
+                                </section>
                                 :
-                                null
+                                <section>
+                                    <label className="left-label"><Translate unsafe content="modal.qrcode.input_message"/></label>
+                                    <input
+                                        name="password"
+                                        type="text"
+                                        onFocus={() => {
+                                            this.refs.password_input.setAttribute("type", "password");
+                                        }}
+                                        ref="password_input"
+                                        autoComplete="off"
+                                        onKeyDown={this.onKeyDown}
+                                    />
+                                </section>
                             }
-                            <button className="button" data-place="bottom" data-html onClick={this.onCancel}>
-                                <Translate content="cancel"/>
-                            </button>
                         </div>
-                    </div>
-                </form>
+                        <div style={pos}>
+                            <div className="button-group">
+                                {this.state.isShowQrcode == false ?
+                                    <button className="button" data-place="bottom" data-html onClick={this.onPasswordEnter}>
+                                        <Translate content="modal.ok"/>
+                                    </button>
+                                    :
+                                    null
+                                }
+                                <button className="button" data-place="bottom" data-html onClick={this.onCancel}>
+                                    <Translate content="cancel"/>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
             </BaseModal>
         );
     }
@@ -116,4 +118,3 @@ QrcodeModal.defaultProps = {
     modalId: "qr_code_password_modal"
 };
 export default QrcodeModal;
- 
\ No newline at end of file
diff --git a/app/components/PrivateKeyView.jsx b/app/components/PrivateKeyView.jsx
index 498c02e90f..36b220467a 100644
--- a/app/components/PrivateKeyView.jsx
+++ b/app/components/PrivateKeyView.jsx
@@ -58,10 +58,15 @@ export default class PrivateKeyView extends Component {
                             <label><Translate content="account.perm.private" /></label>
                             <div>
                                 {this.state.wif ? <span>
-                                    {this.state.wif}
-                                    &nbsp;(<a onClick={this.onHide.bind(this)}>hide</a>,<a onClick={this.showQrCode.bind(this)}><Translate content="modal.qrcode.label" /></a>)
+                                    <p style={{fontWeight: 600}}>{this.state.wif}</p>
+                                    <div className="button-group">
+                                        <div className="button" onClick={this.onHide.bind(this)}>hide</div>
+                                        <div className="clickable" onClick={this.showQrCode.bind(this)}>
+                                            <img style={{height: 50}} src={require("assets/qr.png")} />
+                                        </div>
+                                    </div>
                                 </span>:<span>
-                                    (<a onClick={this.onShow.bind(this)}><Translate content="account.perm.show" /></a>)
+                                    <div className="button" onClick={this.onShow.bind(this)}><Translate content="account.perm.show" /></div>
                                 </span>}
                             </div>
                         </div>

From fb55b69a634865aa6d41afdf0878387878a77d01 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 10:49:41 +0200
Subject: [PATCH 45/82] Fix #545: Show gateway status as down for unavailable
 coins

---
 app/actions/GatewayActions.js                 | 13 ++++++-----
 app/assets/locales/locale-en.json             |  3 ++-
 .../Account/AccountDepositWithdraw.jsx        | 22 +++----------------
 .../DepositWithdraw/BlockTradesGateway.jsx    |  1 +
 .../BlockTradesGatewayDepositRequest.jsx      |  8 +++++--
 app/lib/common/blockTradesMethods.js          |  8 ++++++-
 6 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/app/actions/GatewayActions.js b/app/actions/GatewayActions.js
index fa988a3d65..98f281f9be 100644
--- a/app/actions/GatewayActions.js
+++ b/app/actions/GatewayActions.js
@@ -9,17 +9,20 @@ class GatewayActions {
         if (!inProgress["fetchCoins_" + backer]) {
             inProgress["fetchCoins_" + backer] = true;
             return (dispatch) => {
-                Promise.all([fetchCoins(url),
+                Promise.all([
+                    fetchCoins(url),
                     fetchBridgeCoins(blockTradesAPIs.BASE_OL),
                     getActiveWallets(url)
                 ]).then(result => {
                     delete inProgress["fetchCoins_" + backer];
                     let [coins, tradingPairs, wallets] = result;
+                    let backedCoins = getBackedCoins({allCoins: coins, tradingPairs: tradingPairs, backer: backer}).filter(a => !!a.walletType);
+                    backedCoins.forEach(a => {
+                        a.isAvailable = wallets.indexOf(a.walletType) !== -1;
+                    });
                     dispatch({
-                        coins: coins,
-                        backedCoins: getBackedCoins({allCoins: coins, tradingPairs: tradingPairs, backer: backer}).filter(a => {
-                            return wallets.indexOf(a.walletType) !== -1;
-                        }),
+                        coins,
+                        backedCoins,
                         backer
                     });
                 });
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index ed4ec12965..68040691d4 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1286,7 +1286,8 @@
       "min_amount": "Minimum amount: %(minAmount)s %(symbol)s",
       "min_amount_error": "Please enter number >= minimum",
       "coming_soon": "Coming soon"
-    }
+    },
+    "unavailable": "The gateway service for this asset is currently down, please try again later"
   },
   "chat": {
     "title": "Chat",
diff --git a/app/components/Account/AccountDepositWithdraw.jsx b/app/components/Account/AccountDepositWithdraw.jsx
index 0a3c2edd05..9f03d87ac9 100644
--- a/app/components/Account/AccountDepositWithdraw.jsx
+++ b/app/components/Account/AccountDepositWithdraw.jsx
@@ -111,7 +111,7 @@ class AccountDepositWithdraw extends React.Component {
         });
     }
 
-    renderServices(blockTradesGatewayCoins, openLedgerGatewayCoins, rudexGatewayCoins) {
+    renderServices(openLedgerGatewayCoins, rudexGatewayCoins) {
         //let services = ["Openledger (OPEN.X)", "BlockTrades (TRADE.X)", "Transwiser", "BitKapital"];
         let serList = [];
         let { account } = this.props;
@@ -236,23 +236,7 @@ class AccountDepositWithdraw extends React.Component {
         let { account } = this.props;
         let { activeService } = this.state;
 
-        let blockTradesGatewayCoins = this.props.blockTradesBackedCoins.filter(coin => {
-            if (coin.backingCoinType.toLowerCase() === "muse") {
-                return false;
-            }
-            return coin.symbol.toUpperCase().indexOf("TRADE") !== -1;
-        })
-        .map(coin => {
-            return coin;
-        })
-        .sort((a, b) => {
-            if (a.symbol < b.symbol)
-                return -1;
-            if (a.symbol > b.symbol)
-                return 1;
-            return 0;
-        });
-
+        console.log("openLedgerBackedCoins", this.props.openLedgerBackedCoins);
         let openLedgerGatewayCoins = this.props.openLedgerBackedCoins.map(coin => {
             return coin;
         })
@@ -275,7 +259,7 @@ class AccountDepositWithdraw extends React.Component {
             return 0;
         });
 
-        let services = this.renderServices(blockTradesGatewayCoins, openLedgerGatewayCoins, rudexGatewayCoins);
+        let services = this.renderServices(openLedgerGatewayCoins, rudexGatewayCoins);
 
         let options = services.map((services_obj, index) => {
             return <option key={index} value={index}>{services_obj.name}</option>;
diff --git a/app/components/DepositWithdraw/BlockTradesGateway.jsx b/app/components/DepositWithdraw/BlockTradesGateway.jsx
index 69da001247..a2f4d8885c 100644
--- a/app/components/DepositWithdraw/BlockTradesGateway.jsx
+++ b/app/components/DepositWithdraw/BlockTradesGateway.jsx
@@ -164,6 +164,7 @@ class BlockTradesGateway extends React.Component {
                             receive_asset={coin.symbol}
                             receive_coin_type={coin.symbol.toLowerCase()}
                             supports_output_memos={coin.supportsMemos}
+                            isAvailable={coin.isAvailable}
                             action={this.state.action}
                         />
                         <label className="left-label">Support</label>
diff --git a/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx b/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
index f2d2a788b8..9a1e80f59a 100644
--- a/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
+++ b/app/components/DepositWithdraw/blocktrades/BlockTradesGatewayDepositRequest.jsx
@@ -5,7 +5,6 @@ import ChainTypes from "components/Utility/ChainTypes";
 import BindToChainState from "components/Utility/BindToChainState";
 import WithdrawModalBlocktrades from "./WithdrawModalBlocktrades";
 import BaseModal from "../../Modal/BaseModal";
-import Trigger from "react-foundation-apps/src/trigger";
 import ZfApi from "react-foundation-apps/src/utils/foundation-api";
 import AccountBalance from "../../Account/AccountBalance";
 import BlockTradesDepositAddressCache from "common/BlockTradesDepositAddressCache";
@@ -13,6 +12,7 @@ import AssetName from "components/Utility/AssetName";
 import LinkToAccountById from "components/Blockchain/LinkToAccountById";
 import {requestDepositAddress} from "common/blockTradesMethods";
 import { blockTradesAPIs } from "api/apiConfig";
+import LoadingIndicator from "components/LoadingIndicator";
 
 class BlockTradesGatewayDepositRequest extends React.Component {
     static propTypes = {
@@ -160,7 +160,7 @@ class BlockTradesGatewayDepositRequest extends React.Component {
 
         if( !receive_address ) {
             requestDepositAddress(this._getDepositObject());
-            return emptyRow;
+            return <div style={{margin: "3rem"}}><LoadingIndicator type="three-bounce"/></div>;
         }
 
         let withdraw_modal_id = this.getWithdrawModalId();
@@ -200,6 +200,10 @@ class BlockTradesGatewayDepositRequest extends React.Component {
             var withdraw_memo_prefix = "";
         }
 
+        if (!this.props.isAvailable) {
+            return <div><Translate className="txtlabel cancel" content="gateway.unavailable" component="h4" /></div>;
+        }
+
         if (this.props.action === "deposit") {
             return (
                 <div className="Blocktrades__gateway grid-block no-padding no-margin">
diff --git a/app/lib/common/blockTradesMethods.js b/app/lib/common/blockTradesMethods.js
index 3f29c576ff..cba3335153 100644
--- a/app/lib/common/blockTradesMethods.js
+++ b/app/lib/common/blockTradesMethods.js
@@ -53,6 +53,7 @@ export function getActiveWallets(url = (blockTradesAPIs.BASE_OL + blockTradesAPI
     });
 }
 
+let depositRequests = {};
 export function requestDepositAddress({inputCoinType, outputCoinType, outputAddress, url = blockTradesAPIs.BASE_OL, stateCallback}) {
     let body = {
         inputCoinType,
@@ -61,25 +62,30 @@ export function requestDepositAddress({inputCoinType, outputCoinType, outputAddr
     };
 
     let body_string = JSON.stringify(body);
-
+    if (depositRequests[body_string]) return;
+    depositRequests[body_string] = true;
     fetch( url + "/simple-api/initiate-trade", {
         method:"post",
         headers: new Headers( { "Accept": "application/json", "Content-Type":"application/json" } ),
         body: body_string
     }).then( reply => { reply.json()
         .then( json => {
+            delete depositRequests[body_string];
             // console.log( "reply: ", json )
             let address = {"address": json.inputAddress || "unknown", "memo": json.inputMemo, error: json.error || null};
             if (stateCallback) stateCallback(address);
         }, error => {
             // console.log( "error: ",error  );
+            delete depositRequests[body_string];
             if (stateCallback) stateCallback({"address": "unknown", "memo": null});
         });
     }, error => {
         // console.log( "error: ",error  );
+        delete depositRequests[body_string];
         if (stateCallback) stateCallback({"address": "unknown", "memo": null});
     }).catch(err => {
         console.log("fetch error:", err);
+        delete depositRequests[body_string];
     });
 }
 

From 6773724c19039c0ca9381a11473034cc548fbde5 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 11:08:13 +0200
Subject: [PATCH 46/82] #531: Catch some app init errors and redirect, update
 indexeddbshim

---
 app/routerTransition.js | 10 +++++++++-
 package.json            |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/routerTransition.js b/app/routerTransition.js
index 2cf185e2a7..9cc2a9fe18 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -127,6 +127,10 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
                 SettingsActions.changeSetting({setting: "activeNode", value: connectionManager.url});
                 callback();
             });
+        }).catch(err => {
+            console.error(err);
+            replaceState("/init-error");
+            callback();
         });
     };
 
@@ -192,7 +196,11 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
 
         /* Only try initialize the API with connect = true on the first onEnter */
         connect = false;
-    }));
+    })).catch(err => {
+        console.error(err);
+        replaceState("/init-error");
+        callback();
+    });
 
 
     // Every 15 connections we check the latencies of the full list of nodes
diff --git a/package.json b/package.json
index 7819bf059c..604eac101a 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "fractional": "^1.0.0",
     "highcharts": "4.2.6",
     "immutable": "^3.8.1",
-    "indexeddbshim": "^2.0.4",
+    "indexeddbshim": "^2.2.1",
     "intl": "^1.1.0",
     "jdenticon": "git+https://github.com/cryptonomex/jdenticon.git",
     "js-sha256": "^0.2.3",

From bf93c464bfc256ed0859b0834cdc21b08cb49e26 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 11:15:51 +0200
Subject: [PATCH 47/82] Fix #471: Add label to Find Markets add header

---
 app/components/Exchange/MyMarkets.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Exchange/MyMarkets.jsx b/app/components/Exchange/MyMarkets.jsx
index d08a60c095..4310c95305 100644
--- a/app/components/Exchange/MyMarkets.jsx
+++ b/app/components/Exchange/MyMarkets.jsx
@@ -145,7 +145,7 @@ class MarketGroup extends React.Component {
                 return <th key={header.name}><Translate content="explorer.assets.issuer" /></th>;
 
             case "add":
-                return <th key={header.name}></th>;
+                return <th key={header.name} style={{textAlign: "right"}}><Translate content="account.perm.confirm_add" /></th>;
 
             default:
                 return <th key={header.name}></th>;

From 97a7c186ddf39a63f6033debf7be241c5b94173d Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 11:23:33 +0200
Subject: [PATCH 48/82] Fix an issue with feeAmount not being defined yet when
 checking balances

---
 app/components/Dashboard/SimpleDepositWithdraw.jsx          | 2 +-
 .../blocktrades/WithdrawModalBlocktrades.jsx                | 6 +++---
 app/components/DepositWithdraw/rudex/RuDexWithdrawModal.jsx | 6 +++---
 app/components/Transfer/Transfer.jsx                        | 1 +
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/components/Dashboard/SimpleDepositWithdraw.jsx b/app/components/Dashboard/SimpleDepositWithdraw.jsx
index e4b1e78581..a9d0838393 100644
--- a/app/components/Dashboard/SimpleDepositWithdraw.jsx
+++ b/app/components/Dashboard/SimpleDepositWithdraw.jsx
@@ -242,7 +242,7 @@ class DepositWithdrawContent extends React.Component {
         const {feeAmount, to_withdraw} = this.state;
         const {asset} = this.props;
         const balance = this._getCurrentBalance();
-
+        if (!balance || !feeAmount) return;
         const hasBalance = checkBalance(to_withdraw.getAmount({real: true}), asset, feeAmount, balance);
         if (hasBalance === null) return;
         this.setState({balanceError: !hasBalance});
diff --git a/app/components/DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx b/app/components/DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx
index 7946c81f63..1ae5f5bd13 100644
--- a/app/components/DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx
+++ b/app/components/DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx
@@ -193,9 +193,9 @@ class WithdrawModalBlocktrades extends React.Component {
 
     _checkBalance() {
         const {feeAmount, withdraw_amount} = this.state;
-        const {asset} = this.props;
-
-        const hasBalance = checkBalance(withdraw_amount, asset, feeAmount, this.props.balance);
+        const {asset, balance} = this.props;
+        if (!balance || !feeAmount) return;
+        const hasBalance = checkBalance(withdraw_amount, asset, feeAmount, balance);
         if (hasBalance === null) return;
         this.setState({balanceError: !hasBalance});
         return hasBalance;
diff --git a/app/components/DepositWithdraw/rudex/RuDexWithdrawModal.jsx b/app/components/DepositWithdraw/rudex/RuDexWithdrawModal.jsx
index 9686a7f85e..b187eecb8a 100644
--- a/app/components/DepositWithdraw/rudex/RuDexWithdrawModal.jsx
+++ b/app/components/DepositWithdraw/rudex/RuDexWithdrawModal.jsx
@@ -198,9 +198,9 @@ class RuDexWithdrawModal extends React.Component {
 
     _checkBalance() {
         const {feeAmount, withdraw_amount} = this.state;
-        const {asset} = this.props;
-
-        const hasBalance = checkBalance(withdraw_amount, asset, feeAmount, this.props.balance);
+        const {asset, balance} = this.props;
+        if (!balance || !feeAmount) return;
+        const hasBalance = checkBalance(withdraw_amount, asset, feeAmount, balance);
         if (hasBalance === null) return;
         this.setState({balanceError: !hasBalance});
         return hasBalance;
diff --git a/app/components/Transfer/Transfer.jsx b/app/components/Transfer/Transfer.jsx
index 1b841a573e..516247cbb8 100644
--- a/app/components/Transfer/Transfer.jsx
+++ b/app/components/Transfer/Transfer.jsx
@@ -121,6 +121,7 @@ class Transfer extends React.Component {
         if (!feeBalanceObject || feeBalanceObject.get("balance") === 0) {
             this.setState({fee_asset_id: "1.3.0"}, this._updateFee);
         }
+        if (!balanceObject || !feeAmount) return;
         const hasBalance = checkBalance(amount, asset, feeAmount, balanceObject);
         if (hasBalance === null) return;
         this.setState({balanceError: !hasBalance});

From 77901c201bff4986090762477e0ce70f61a81644 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 11:26:34 +0200
Subject: [PATCH 49/82] Fix #483: Remove TRADE.X from dropdown and remove
 blocktrades gateway

---
 .../Account/AccountDepositWithdraw.jsx           | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/app/components/Account/AccountDepositWithdraw.jsx b/app/components/Account/AccountDepositWithdraw.jsx
index 9f03d87ac9..6f01097ba8 100644
--- a/app/components/Account/AccountDepositWithdraw.jsx
+++ b/app/components/Account/AccountDepositWithdraw.jsx
@@ -180,7 +180,7 @@ class AccountDepositWithdraw extends React.Component {
         });
 
         serList.push({
-            name: "BlockTrades (TRADE.X)",
+            name: "BlockTrades",
             template: (
                 <div>
                         <div className="content-block">
@@ -189,11 +189,9 @@ class AccountDepositWithdraw extends React.Component {
                             <div className="service-selector">
                                 <ul className="button-group segmented no-margin">
                                     <li onClick={this.toggleBTService.bind(this, "bridge")} className={btService === "bridge" ? "is-active" : ""}><a><Translate content="gateway.bridge" /></a></li>
-                                    <li onClick={this.toggleBTService.bind(this, "gateway")} className={btService === "gateway" ? "is-active" : ""}><a><Translate content="gateway.gateway" /></a></li>
                                 </ul>
                             </div>
 
-                            {btService === "bridge" ?
                             <BlockTradesBridgeDepositRequest
                                 gateway="blocktrades"
                                 issuer_account="blocktrades"
@@ -207,17 +205,7 @@ class AccountDepositWithdraw extends React.Component {
                                 initial_conversion_input_coin_type="bts"
                                 initial_conversion_output_coin_type="bitbtc"
                                 initial_conversion_estimated_input_amount="1000"
-                            /> : null}
-
-                            {btService === "gateway" ?
-                            <div>
-                                <h4 className="txtlabel cancel">This cryptocurrency gateway is shutting down as it is rarely if ever used</h4>
-                                <p>Openledger's gateway continues to operate, and it offers more coins and a far more liquid trading environment. Note that we will be continuing the operation of our cryptocurrency bridge for quickly buying and selling cryptocurrency, since it is actively used by the Bitshares community.</p>
-
-                                <p>We'll be shutting down this gateway in stages. In the first stage, which has just begun, we've disabled deposits to the gateway. Inevitably, someone may still use one of their old deposit addresses, in which case we'll manually refund them when you contact us. <b>We request that if you hold any TRADE assets, you perform a withdrawal of those assets during this stage.</b></p>
-
-                                <p>Eventually, we will also disable withdrawals as well, but we will leave in place a 1-1 market order on OPEN.BTC_TRADE.BTC for a while after that to allow users to exchange any remaining TRADE.BTC for OPEN.BTC. We will place similar orders for any other TRADE assets that remain outstanding after withdrawals are disabled.</p>
-                            </div> : null}
+                            />
                         </div>
                         <div className="content-block">
                         </div>

From c7b6e4373212fdc7bc17d2cbfe94103aa089c372 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 13:26:51 +0200
Subject: [PATCH 50/82] Fix #529: Withrawal modal inputs

---
 .../Dashboard/SimpleDepositWithdraw.jsx          | 16 +++++++++++++---
 app/components/Exchange/ExchangeInput.jsx        | 16 +++++++++-------
 app/lib/common/MarketClasses.js                  |  3 +--
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/components/Dashboard/SimpleDepositWithdraw.jsx b/app/components/Dashboard/SimpleDepositWithdraw.jsx
index a9d0838393..aad36e5da8 100644
--- a/app/components/Dashboard/SimpleDepositWithdraw.jsx
+++ b/app/components/Dashboard/SimpleDepositWithdraw.jsx
@@ -18,11 +18,12 @@ import { checkFeeStatusAsync, checkBalance } from "common/trxHelper";
 import AssetName from "../Utility/AssetName";
 import { ChainStore } from "bitsharesjs/es";
 import { debounce } from "lodash";
+import {DecimalChecker} from "../Exchange/ExchangeInput";
 
 // import DepositFiatOpenLedger from "components/DepositWithdraw/openledger/DepositFiatOpenLedger";
 // import WithdrawFiatOpenLedger from "components/DepositWithdraw/openledger/WithdrawFiatOpenLedger";
 
-class DepositWithdrawContent extends React.Component {
+class DepositWithdrawContent extends DecimalChecker {
 
     static propTypes = {
         sender: ChainTypes.ChainAccount.isRequired,
@@ -315,6 +316,7 @@ class DepositWithdrawContent extends React.Component {
     }
 
     _renderWithdraw() {
+        const {amountError} = this.state;
         const {name: assetName} = utils.replaceName(this.props.asset.get("symbol"), !!this.props.asset.get("bitasset"));
         let tabIndex = 1;
         const {supportsMemos} = this.props;
@@ -346,20 +348,28 @@ class DepositWithdrawContent extends React.Component {
                 <div className="SimpleTrade__withdraw-row">
                         <label className="left-label">{counterpart.translate("modal.withdraw.amount")}</label>
                         <div className="inline-label input-wrapper">
-                            <input tabIndex={tabIndex++} type="text" value={this.state.withdrawValue} onChange={this._onInputAmount.bind(this)} />
+                            <input
+                                tabIndex={tabIndex++}
+                                type="number"
+                                min="0"
+                                onKeyPress={this.onKeyPress.bind(this)}
+                                value={this.state.withdrawValue}
+                                onChange={this._onInputAmount.bind(this)}
+                            />
                             <div className="form-label select floating-dropdown">
                                 <div className="dropdown-wrapper inactive">
                                     <div>{assetName}</div>
                                 </div>
                             </div>
                         </div>
+                    {amountError ? <p className="has-error no-margin" style={{paddingTop: 10}}><Translate content={amountError} /></p>:null}
                     {this.state.balanceError ? <p className="has-error no-margin" style={{paddingTop: 10}}><Translate content="transfer.errors.insufficient" /></p>:null}
                 </div>
 
                 <div className="SimpleTrade__withdraw-row">
                     <label className="left-label">{counterpart.translate("transfer.fee")}</label>
                         <div className="inline-label input-wrapper">
-                            <input type="text" value={currentFee.getAmount({real: true})} />
+                            <input type="text" disabled value={currentFee.getAmount({real: true})} />
 
                             <div className="form-label select floating-dropdown">
                                 <div className="dropdown-wrapper inactive">
diff --git a/app/components/Exchange/ExchangeInput.jsx b/app/components/Exchange/ExchangeInput.jsx
index 3e75c708b4..49834cc7ff 100644
--- a/app/components/Exchange/ExchangeInput.jsx
+++ b/app/components/Exchange/ExchangeInput.jsx
@@ -1,21 +1,23 @@
 import React from "react";
 
-class ExchangeInput extends React.Component {
-    constructor(){
-        super();
-    }
-
+export class DecimalChecker extends React.Component {
     onKeyPress(e){
         var nextValue = e.target.value + e.key;
         var decimal = nextValue.match(/\./g);
         var decimalCount = decimal ? decimal.length : 0;
-        if(e.key === '.' && decimalCount > 1) e.preventDefault();
+        if(e.key === "." && decimalCount > 1) e.preventDefault();
 
         if(this.props.onKeyPress) this.props.onKeyPress(e);
     }
+}
+
+class ExchangeInput extends DecimalChecker {
+    constructor(){
+        super();
+    }
 
     render(){
-        return <input type="number" {...this.props} onKeyPress={this.onKeyPress.bind(this)} />
+        return <input type="number" {...this.props} onKeyPress={this.onKeyPress.bind(this)} />;
     }
 }
 
diff --git a/app/lib/common/MarketClasses.js b/app/lib/common/MarketClasses.js
index 2fd2ddc6aa..7043e0016c 100644
--- a/app/lib/common/MarketClasses.js
+++ b/app/lib/common/MarketClasses.js
@@ -58,8 +58,7 @@ class Asset {
         if (typeof sats !== "number" && typeof real !== "number") {
             throw new Error("Invalid arguments for setAmount");
         }
-        if (real && typeof real !== "undefined") {
-            if (typeof real !== "number" || isNaN(real)) throw new Error("Invalid argument 'real' for setAmount");
+        if (typeof real === "number") {
             this.amount = this.toSats(real);
             this._clearCache();
         } else if(typeof sats === "number") {

From 8795eb0b479fa9eaa7ed3dabe9dd8e03e45552c4 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Wed, 11 Oct 2017 15:29:47 +0200
Subject: [PATCH 51/82] Simplify and improve app init chain #531

---
 app/App.jsx                                   | 55 +++++++---------
 .../Dashboard/DashboardContainer.jsx          |  5 +-
 app/components/LoadingIndicator.jsx           |  1 +
 app/components/Wallet/BalanceClaimActive.jsx  |  2 +-
 app/routerTransition.js                       | 64 ++++++++++---------
 app/stores/AccountRefsStore.js                | 41 +++++++-----
 app/stores/AccountStore.js                    |  7 +-
 app/stores/AddressIndex.js                    |  4 +-
 package.json                                  |  2 +-
 9 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/app/App.jsx b/app/App.jsx
index 59b72b3add..508bac3bd1 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -21,8 +21,8 @@ import TransactionConfirm from "./components/Blockchain/TransactionConfirm";
 import WalletUnlockModal from "./components/Wallet/WalletUnlockModal";
 import BrowserSupportModal from "./components/Modal/BrowserSupportModal";
 import Footer from "./components/Layout/Footer";
-import Incognito from "./components/Layout/Incognito";
-import { isIncognito } from "feature_detect";
+// import Incognito from "./components/Layout/Incognito";
+// import { isIncognito } from "feature_detect";
 
 class App extends React.Component {
 
@@ -35,7 +35,7 @@ class App extends React.Component {
 
         let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
         this.state = {
-            loading: true,
+            loading: false,
             synced: ChainStore.subscribed,
             syncFail,
             theme: SettingsStore.getState().settings.get("themes"),
@@ -58,30 +58,19 @@ class App extends React.Component {
 
     componentDidMount() {
         try {
-            isIncognito(function(incognito){
-                this.setState({incognito});
-            }.bind(this));
-
             NotificationStore.listen(this._onNotificationChange.bind(this));
             SettingsStore.listen(this._onSettingsChange);
-
-            ChainStore.init().then(() => {
-                this.setState({synced: true});
-                Promise.all([
-                    AccountStore.loadDbData(Apis.instance().chainId)
-                ]).then(() => {
-                    AccountStore.tryToSetCurrentAccount();
-                    this.setState({loading: false});
-                }).catch(error => {
-                    console.log("[App.jsx] ----- ERROR ----->", error);
-                    this.setState({loading: false});
-                });
-            }).catch(error => {
-                console.log("[App.jsx] ----- ChainStore.init error ----->", error);
-                let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
-
-                this.setState({loading: false, synced: false, syncFail});
+            ChainStore.subscribe(() => {
+                if (ChainStore.subscribed !== this.state.synced || ChainStore.subError) {
+                    let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
+                    this.setState({
+                        synced: ChainStore.subscribed,
+                        syncFail
+                    });
+                }
             });
+
+            AccountStore.tryToSetCurrentAccount();
         } catch(e) {
             console.error("e:", e);
         }
@@ -152,21 +141,23 @@ class App extends React.Component {
     // }
 
     render() {
-        let {isMobile, showChat, dockedChat, theme, incognito, incognitoWarningDismissed } = this.state;
+        let {isMobile, showChat, dockedChat, theme } = this.state;
         let content = null;
 
         let showFooter = this.props.location.pathname.indexOf("market") === -1;
-
-        if(incognito && !incognitoWarningDismissed){
-            content = (
-                <Incognito onClickIgnore={this._onIgnoreIncognitoWarning.bind(this)}/>
-            );
-        } else if (this.state.syncFail) {
+        // if(incognito && !incognitoWarningDismissed){
+        //     content = (
+        //         <Incognito onClickIgnore={this._onIgnoreIncognitoWarning.bind(this)}/>
+        //     );
+        // } else
+        if (this.state.syncFail) {
             content = (
                 <SyncError />
             );
         } else if (this.state.loading) {
-            content = <div className="grid-frame vertical"><LoadingIndicator /></div>;
+            content = <div className="grid-frame vertical">
+                <LoadingIndicator loadingText={"Connecting to APIS and tarting app"}/>
+            </div>;
         } else if (this.props.location.pathname === "/init-error") {
             content = <div className="grid-frame vertical">{this.props.children}</div>;
         } else {
diff --git a/app/components/Dashboard/DashboardContainer.jsx b/app/components/Dashboard/DashboardContainer.jsx
index a672042913..7258c782a2 100644
--- a/app/components/Dashboard/DashboardContainer.jsx
+++ b/app/components/Dashboard/DashboardContainer.jsx
@@ -26,10 +26,7 @@ class DashboardContainer extends React.Component {
                     },
                     lowVolumeMarkets: () => {
                         return MarketsStore.getState().lowVolumeMarkets;
-                    },
-                    // marketStats: () => {
-                    //     return MarketsStore.getState().allMarketStats;
-                    // }
+                    }
                 }}>
                 <Dashboard {...this.props} />
             </AltContainer>
diff --git a/app/components/LoadingIndicator.jsx b/app/components/LoadingIndicator.jsx
index 1678b75e26..f6db6036b3 100644
--- a/app/components/LoadingIndicator.jsx
+++ b/app/components/LoadingIndicator.jsx
@@ -42,6 +42,7 @@ class LoadingIndicator extends React.Component {
                 return (
                     <div className={classes}>
                         <div className="loading-panel">
+                            <div className="text-center">{this.props.loadingText}</div>
                             <div className="spinner">
                                 <div className="bounce1"></div>
                                 <div className="bounce2"></div>
diff --git a/app/components/Wallet/BalanceClaimActive.jsx b/app/components/Wallet/BalanceClaimActive.jsx
index 4e62949bb9..4caad9987f 100644
--- a/app/components/Wallet/BalanceClaimActive.jsx
+++ b/app/components/Wallet/BalanceClaimActive.jsx
@@ -120,7 +120,7 @@ BalanceClaimActive = connect(BalanceClaimActive, {
     },
     getProps() {
         let props = BalanceClaimActiveStore.getState();
-        props.account_refs = AccountRefsStore.getState().account_refs;
+        props.account_refs = AccountRefsStore.getAccountRefs();
         return props;
     }
 });
diff --git a/app/routerTransition.js b/app/routerTransition.js
index 9cc2a9fe18..32204bcc8e 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -83,7 +83,7 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
             }
         }
         const currentChain = Apis.instance().chain_id;
-        const chainChanged = oldChain && oldChain !== currentChain;
+        const chainChanged = oldChain !== currentChain;
         oldChain = currentChain;
         var db;
         try {
@@ -95,38 +95,42 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
             return callback();
         }
         return Promise.all([db, SettingsStore.init()]).then(() => {
-            return Promise.all([
-                PrivateKeyActions.loadDbData().then(()=> {
-                    AccountRefsStore.loadDbData();
-                }),
-                WalletDb.loadDbData().then(() => {
-                    // if (!WalletDb.getWallet() && nextState.location.pathname === "/") {
-                    //     replaceState("/dashboard");
-                    // }
-                    if (nextState.location.pathname.indexOf("/auth/") === 0) {
-                        replaceState("/dashboard");
-                    }
-                }).then(() => {
-                    if (chainChanged) {
-                        ChainStore.clearCache();
-                        ChainStore.subscribed = false;
-                        ChainStore.init().then(() => {
+            let chainStoreResetPromise = chainChanged ? ChainStore.resetCache() : Promise.resolve();
+            return chainStoreResetPromise.then(() => {
+                return Promise.all([
+                    PrivateKeyActions.loadDbData().then(()=> {
+                        return AccountRefsStore.loadDbData();
+                    }),
+                    WalletDb.loadDbData().then(() => {
+                        // if (!WalletDb.getWallet() && nextState.location.pathname === "/") {
+                        //     replaceState("/dashboard");
+                        // }
+                        if (nextState.location.pathname.indexOf("/auth/") === 0) {
+                            replaceState("/dashboard");
+                        }
+                    }).then(() => {
+                        if (chainChanged) {
+                            // ChainStore.clearCache();
+                            // ChainStore.subscribed = false;
+                            // return ChainStore.resetCache().then(() => {
                             AccountStore.reset();
-                            AccountStore.loadDbData(currentChain).catch(err => {
+                            return AccountStore.loadDbData(currentChain).catch(err => {
                                 console.error(err);
                             });
-                        });
-                    }
-                })
-                .catch((error) => {
-                    console.error("----- WalletDb.willTransitionTo error ----->", error);
-                    replaceState("/init-error");
-                }),
-                WalletManagerStore.init()
-            ]).then(()=> {
-                SettingsActions.changeSetting({setting: "activeNode", value: connectionManager.url});
-                callback();
-            });
+                            // });
+                        }
+                    })
+                    .catch((error) => {
+                        console.error("----- WalletDb.willTransitionTo error ----->", error);
+                        replaceState("/init-error");
+                    }),
+                    WalletManagerStore.init()
+                ]).then(()=> {
+                    SettingsActions.changeSetting({setting: "activeNode", value: connectionManager.url});
+                    callback();
+                });
+            })
+
         }).catch(err => {
             console.error(err);
             replaceState("/init-error");
diff --git a/app/stores/AccountRefsStore.js b/app/stores/AccountRefsStore.js
index 38d089d9c7..8706e66f0c 100644
--- a/app/stores/AccountRefsStore.js
+++ b/app/stores/AccountRefsStore.js
@@ -11,7 +11,7 @@ class AccountRefsStore extends BaseStore {
 
     constructor() {
         super()
-        this._export("loadDbData")
+        this._export("loadDbData", "getAccountRefs");
         this.state = this._getInitialState()
         this.bindListeners({ onAddPrivateKey: PrivateKeyActions.addKey })
         this.no_account_refs = Immutable.Set() // Set of account ids
@@ -21,23 +21,34 @@ class AccountRefsStore extends BaseStore {
     _getInitialState() {
         this.chainstore_account_ids_by_key = null;
         this.chainstore_account_ids_by_account = null;
+        let account_refs = new Immutable.Map();
+        account_refs = account_refs.set(this._getChainId(), Immutable.Set());
         return {
-            account_refs: Immutable.Set()
-            // loading_account_refs: false
-        }
+            account_refs
+        };
+    }
+
+    getAccountRefs(chainId = this._getChainId()) {
+        return this.state.account_refs.get(chainId, Immutable.Set());
+    }
+
+    _getChainId() {
+        return Apis.instance().chain_id || "4018d7844c78f6a6c41c6a552b898022310fc5dec06da467ee7905a8dad512c8";
     }
 
     onAddPrivateKey({private_key_object}) {
         if(ChainStore.getAccountRefsOfKey(private_key_object.pubkey) !== undefined)
-            this.chainStoreUpdate()
+            this.chainStoreUpdate();
     }
 
     loadDbData() {
-        // this.setState(this._getInitialState())
         this.chainstore_account_ids_by_key = null;
         this.chainstore_account_ids_by_account = null;
         this.no_account_refs = Immutable.Set();
-        this.state = {account_refs: Immutable.Set()};
+
+        let account_refs = new Immutable.Map();
+        account_refs = account_refs.set(this._getChainId(), Immutable.Set());
+        this.state = {account_refs};
         return loadNoAccountRefs()
             .then( no_account_refs => this.no_account_refs = no_account_refs )
             .then( ()=> this.chainStoreUpdate() );
@@ -55,7 +66,7 @@ class AccountRefsStore extends BaseStore {
 
     checkPrivateKeyStore() {
         let no_account_refs = this.no_account_refs
-        let account_refs = Immutable.Set()
+        let temp_account_refs = Immutable.Set()
         PrivateKeyStore.getState().keys.keySeq().forEach( pubkey => {
             if(no_account_refs.has(pubkey)) return
             let refs = ChainStore.getAccountRefsOfKey(pubkey)
@@ -76,21 +87,21 @@ class AccountRefsStore extends BaseStore {
                 no_account_refs = no_account_refs.add(pubkey)
                 return
             }
-            account_refs = account_refs.add(refs.valueSeq())
+            temp_account_refs = temp_account_refs.add(refs.valueSeq())
         })
-        account_refs = account_refs.flatten();
+        temp_account_refs = temp_account_refs.flatten();
 
         /* Discover accounts referenced by account name in permissions */
-        account_refs.forEach(account => {
+        temp_account_refs.forEach(account => {
             let refs = ChainStore.getAccountRefsOfAccount(account);
             if(refs === undefined) return;
             if( ! refs.size) return;
-            account_refs = account_refs.add(refs.valueSeq());
+            temp_account_refs = temp_account_refs.add(refs.valueSeq());
         });
-        account_refs = account_refs.flatten();
-        if( ! this.state.account_refs.equals(account_refs)) {
+        temp_account_refs = temp_account_refs.flatten();
+        if( ! this.getAccountRefs().equals(temp_account_refs)) {
+            this.state.account_refs = this.state.account_refs.set(this._getChainId(), temp_account_refs);
             // console.log("AccountRefsStore account_refs",account_refs.size);
-            this.setState({account_refs})
         }
         if(!this.no_account_refs.equals(no_account_refs)) {
             this.no_account_refs = no_account_refs
diff --git a/app/stores/AccountStore.js b/app/stores/AccountStore.js
index ac8f8f823c..6d584cf911 100644
--- a/app/stores/AccountStore.js
+++ b/app/stores/AccountStore.js
@@ -90,7 +90,7 @@ class AccountStore extends BaseStore {
         } else {
             accountStorage.remove("referralAccount");
         }
-        console.log("referralAccount", referralAccount);
+        if (referralAccount) console.log("referralAccount", referralAccount);
         return referralAccount;
     }
 
@@ -181,7 +181,6 @@ class AccountStore extends BaseStore {
     loadDbData() {
         let linkedAccounts = Immutable.Set().asMutable();
         let chainId = Apis.instance().chain_id;
-
         return new Promise((resolve, reject) => {
             iDB.load_data("linked_accounts")
             .then(data => {
@@ -227,7 +226,7 @@ class AccountStore extends BaseStore {
 
     addAccountRefs() {
         //  Simply add them to the linkedAccounts list (no need to persist them)
-        let account_refs = AccountRefsStore.getState().account_refs;
+        let account_refs = AccountRefsStore.getAccountRefs();
         if( ! this.initial_account_refs_load && this.account_refs === account_refs) {
             return this.setState({refsLoaded: true});
         }
@@ -489,7 +488,7 @@ class AccountStore extends BaseStore {
 
     checkAccountRefs() {
         //  Simply add them to the linkedAccounts list (no need to persist them)
-        let account_refs = AccountRefsStore.getState().account_refs;
+        let account_refs = AccountRefsStore.getAccountRefs();
 
         account_refs.forEach(id => {
             let account = ChainStore.getAccount(id);
diff --git a/app/stores/AddressIndex.js b/app/stores/AddressIndex.js
index 0553fa5528..e2a3761b86 100644
--- a/app/stores/AddressIndex.js
+++ b/app/stores/AddressIndex.js
@@ -103,7 +103,7 @@ class AddressIndex extends BaseStore {
         if(this.loadAddyMapPromise) return this.loadAddyMapPromise;
         this.loadAddyMapPromise = iDB.root.getProperty("AddressIndex").then( map => {
             this.state.addresses = map ? Immutable.Map(map) : Immutable.Map();
-            console.log("AddressIndex load", this.state.addresses.size);
+            // console.log("AddressIndex load", this.state.addresses.size);
             this.state.addresses.valueSeq().forEach( pubkey => this.pubkeys.add(pubkey) );
             this.setState({ addresses: this.state.addresses });
         });
@@ -113,7 +113,7 @@ class AddressIndex extends BaseStore {
     saveAddyMap() {
         clearTimeout(this.saveAddyMapTimeout);
         this.saveAddyMapTimeout = setTimeout(()=> {
-            console.log("AddressIndex save", this.state.addresses.size);
+            // console.log("AddressIndex save", this.state.addresses.size);
             this.setState({saving: false});
             // If indexedDB fails to save, it will re-try via PrivateKeyStore calling this.add
             return iDB.root.setProperty("AddressIndex", this.state.addresses.toObject());
diff --git a/package.json b/package.json
index cdd6335ce6..0a32d7812f 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "alt-container": "^1.0.0",
     "alt-react": "0.0.1",
     "bignumber.js": "^4.0.0",
-    "bitsharesjs": "^1.3.2",
+    "bitsharesjs": "^1.3.3",
     "classnames": "^2.2.1",
     "cookies-js": "^1.2.1",
     "counterpart": "^0.17.1",

From c9563348ff943b9a73f465030a6ead46513ad771 Mon Sep 17 00:00:00 2001
From: Calvin Froedge <calvinfroedge@gmail.com>
Date: Wed, 11 Oct 2017 12:04:34 -0500
Subject: [PATCH 52/82] iss-547: Show unavailable messages for openledger and
 rudex if they time out (#560)

* Show unavailable messages for openledger and rudex if they time out

* Add down/available warnings to deposit/withdraw modals; hide gateways completely when down
---
 app/actions/GatewayActions.js                 | 14 +++++++++++
 app/assets/locales/locale-en.json             |  6 ++++-
 .../Account/AccountDepositWithdraw.jsx        | 19 +++++++++++---
 app/components/Account/AccountOverview.jsx    |  3 +++
 app/components/Account/AccountPage.jsx        |  6 +++--
 .../SimpleDepositBlocktradesBridge.jsx        | 11 +++++---
 .../Dashboard/SimpleDepositWithdraw.jsx       |  9 +++++--
 app/stores/GatewayStore.js                    | 25 +++++++++++++++----
 8 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/app/actions/GatewayActions.js b/app/actions/GatewayActions.js
index 98f281f9be..0a846ab96b 100644
--- a/app/actions/GatewayActions.js
+++ b/app/actions/GatewayActions.js
@@ -4,16 +4,26 @@ import {blockTradesAPIs} from "api/apiConfig";
 
 let inProgress = {};
 
+const GATEWAY_TIMEOUT = 10000;
+
+const onGatewayTimeout = (dispatch, gateway)=>{
+    dispatch({down: gateway});
+};
+
 class GatewayActions {
     fetchCoins({backer = "OPEN", url = undefined} = {}) {
         if (!inProgress["fetchCoins_" + backer]) {
             inProgress["fetchCoins_" + backer] = true;
             return (dispatch) => {
+                let fetchCoinsTimeout = setTimeout(onGatewayTimeout.bind(null, dispatch, backer), GATEWAY_TIMEOUT);
+
                 Promise.all([
                     fetchCoins(url),
                     fetchBridgeCoins(blockTradesAPIs.BASE_OL),
                     getActiveWallets(url)
                 ]).then(result => {
+                    clearTimeout(fetchCoinsTimeout);
+
                     delete inProgress["fetchCoins_" + backer];
                     let [coins, tradingPairs, wallets] = result;
                     let backedCoins = getBackedCoins({allCoins: coins, tradingPairs: tradingPairs, backer: backer}).filter(a => !!a.walletType);
@@ -37,8 +47,10 @@ class GatewayActions {
         if (!inProgress["fetchCoinsSimple_" + backer]) {
             inProgress["fetchCoinsSimple_" + backer] = true;
             return (dispatch) => {
+                let fetchCoinsTimeout = setTimeout(onGatewayTimeout.bind(null, dispatch, backer), GATEWAY_TIMEOUT);
                 fetchCoinsSimple(url)
                     .then(coins => {
+                        clearTimeout(fetchCoinsTimeout);
                         delete inProgress["fetchCoinsSimple_" + backer];
 
                         dispatch({
@@ -56,11 +68,13 @@ class GatewayActions {
         if (!inProgress["fetchBridgeCoins"]) {
             inProgress["fetchBridgeCoins"] = true;
             return (dispatch) => {
+                let fetchCoinsTimeout = setTimeout(onGatewayTimeout.bind(null, dispatch, "TRADE"), GATEWAY_TIMEOUT);
                 Promise.all([
                     fetchCoins(url),
                     fetchBridgeCoins(blockTradesAPIs.BASE),
                     getActiveWallets(url)
                 ]).then(result => {
+                    clearTimeout(fetchCoinsTimeout);
                     delete inProgress["fetchBridgeCoins"];
                     let [coins, bridgeCoins, wallets] = result;
                     dispatch({
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index ae42d49e93..07bff72b3e 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -1297,7 +1297,11 @@
       "min_amount_error": "Please enter number >= minimum",
       "coming_soon": "Coming soon"
     },
-    "unavailable": "The gateway service for this asset is currently down, please try again later"
+    "unavailable": "The gateway service for this asset is currently down, please try again later",
+    "unavailable_bridge": "The brdige service for this asset is currently down, please try again later",
+    "unavailable_OPEN": "The OpenLedger Gateway is down or not responding",
+    "unavailable_RUDEX": "The RuDEX Gateway is down or not responding",
+    "unavailable_TRADE": "The Blocktrades Bridge is down or not responding"
   },
   "chat": {
     "title": "Chat",
diff --git a/app/components/Account/AccountDepositWithdraw.jsx b/app/components/Account/AccountDepositWithdraw.jsx
index 6f01097ba8..2e4fbea6ab 100644
--- a/app/components/Account/AccountDepositWithdraw.jsx
+++ b/app/components/Account/AccountDepositWithdraw.jsx
@@ -46,6 +46,7 @@ class AccountDepositWithdraw extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         return (
             nextProps.account !== this.props.account ||
+            nextProps.servicesDown !== this.props.servicesDown ||
             !utils.are_equal_shallow(nextProps.blockTradesBackedCoins, this.props.blockTradesBackedCoins) ||
             !utils.are_equal_shallow(nextProps.openLedgerBackedCoins, this.props.openLedgerBackedCoins) ||
             nextState.olService !== this.state.olService ||
@@ -221,10 +222,9 @@ class AccountDepositWithdraw extends React.Component {
     }
 
     render() {
-        let { account } = this.props;
+        let { account, servicesDown } = this.props;
         let { activeService } = this.state;
 
-        console.log("openLedgerBackedCoins", this.props.openLedgerBackedCoins);
         let openLedgerGatewayCoins = this.props.openLedgerBackedCoins.map(coin => {
             return coin;
         })
@@ -252,6 +252,11 @@ class AccountDepositWithdraw extends React.Component {
         let options = services.map((services_obj, index) => {
             return <option key={index} value={index}>{services_obj.name}</option>;
         });
+
+        const serviceNames = ["OPEN", "RUDEX", "TRADE", "BITKAPITAL"];
+        const currentServiceName = serviceNames[activeService];
+        const currentServiceDown = servicesDown.get(currentServiceName);
+
         return (
             <div className={this.props.contained ? "grid-content" : "grid-container"}>
                 <div className={this.props.contained ? "" : "grid-content"} style={{paddingTop: "2rem"}}>
@@ -272,6 +277,11 @@ class AccountDepositWithdraw extends React.Component {
                                 <select onChange={this.onSetService.bind(this)} className="bts-select" value={activeService} >
                                     {options}
                                 </select>
+                                {
+                                  currentServiceDown ?
+                                  <Translate style={{color: "red", marginBottom: "1em", display: "block"}} content={`gateway.unavailable_${currentServiceName}`} />
+                                  : null
+                                }
                             </div>
                             <div className="medium-5 medium-offset-1 small-order-1 medium-order-2" style={{paddingBottom: 20}}>
                                 <Translate component="label" className="left-label" content="gateway.your_account" />
@@ -294,7 +304,7 @@ class AccountDepositWithdraw extends React.Component {
                     </div>
 
                     <div className="grid-content no-padding" style={{paddingTop: 15}}>
-                    {activeService && services[activeService] ? services[activeService].template : services[0].template}
+                    {currentServiceDown ? null : activeService && services[activeService] ? services[activeService].template : services[0].template}
                     </div>
                 </div>
             </div>
@@ -328,7 +338,8 @@ export default connect(DepositStoreWrapper, {
             viewSettings: SettingsStore.getState().viewSettings,
             openLedgerBackedCoins: GatewayStore.getState().backedCoins.get("OPEN", []),
             rudexBackedCoins: GatewayStore.getState().backedCoins.get("RUDEX", []),
-            blockTradesBackedCoins: GatewayStore.getState().backedCoins.get("TRADE", [])
+            blockTradesBackedCoins: GatewayStore.getState().backedCoins.get("TRADE", []),
+            servicesDown: GatewayStore.getState().down || {}
         };
     }
 });
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index ef91645b73..645af68c71 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -622,6 +622,7 @@ class AccountOverview extends React.Component {
                     modalId="simple_deposit_modal"
                     balances={this.props.balances}
                     {...currentDepositAsset}
+                    isDown={this.props.gatewayDown.get("OPEN")}
                 />
 
                 {/* Withdraw Modal */}
@@ -635,6 +636,7 @@ class AccountOverview extends React.Component {
                     modalId="simple_withdraw_modal"
                     balances={this.props.balances}
                     {...currentWithdrawAsset}
+                    isDown={this.props.gatewayDown.get("OPEN")}
                 />
 
                 {/* Bridge modal */}
@@ -647,6 +649,7 @@ class AccountOverview extends React.Component {
                     modalId="simple_bridge_modal"
                     balances={this.props.balances}
                     bridges={currentBridges}
+                    isDown={this.props.gatewayDown.get("TRADE")}
                 />
             </div>
 
diff --git a/app/components/Account/AccountPage.jsx b/app/components/Account/AccountPage.jsx
index e69f2572ac..0b0ab5e38f 100644
--- a/app/components/Account/AccountPage.jsx
+++ b/app/components/Account/AccountPage.jsx
@@ -63,7 +63,8 @@ class AccountPage extends React.Component {
                             balances: account.get("balances", null),
                             orders: account.get("orders", null),
                             backedCoins: this.props.backedCoins,
-                            bridgeCoins: this.props.bridgeCoins
+                            bridgeCoins: this.props.bridgeCoins,
+                            gatewayDown: this.props.gatewayDown
                         }
                     )}
                     </div>
@@ -96,7 +97,8 @@ export default connect(AccountPageStoreWrapper, {
             myAccounts:  AccountStore.getState().myAccounts,
             viewSettings: SettingsStore.getState().viewSettings,
             backedCoins: GatewayStore.getState().backedCoins,
-            bridgeCoins: GatewayStore.getState().bridgeCoins
+            bridgeCoins: GatewayStore.getState().bridgeCoins,
+            gatewayDown: GatewayStore.getState().down
         };
     }
 });
diff --git a/app/components/Dashboard/SimpleDepositBlocktradesBridge.jsx b/app/components/Dashboard/SimpleDepositBlocktradesBridge.jsx
index a02b0fc197..80897d2583 100644
--- a/app/components/Dashboard/SimpleDepositBlocktradesBridge.jsx
+++ b/app/components/Dashboard/SimpleDepositBlocktradesBridge.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import ZfApi from "react-foundation-apps/src/utils/foundation-api";
 import BaseModal from "../Modal/BaseModal";
-import Trigger from "react-foundation-apps/src/trigger";
 import Translate from "react-translate-component";
 import { Asset } from "common/MarketClasses";
 import utils from "common/utils";
@@ -69,6 +68,8 @@ class SimpleDepositBlocktradesBridge extends React.Component {
             np.outputCoinType !== this.props.outputCoinType ||
             np.sender !== this.props.sender ||
             np.asset !== this.props.asset ||
+            np.isAvailable !== this.props.isAvailable ||
+            np.isDown !== this.props.isDown ||
             !utils.are_equal_shallow(ns, this.state)
         );
     }
@@ -205,7 +206,7 @@ class SimpleDepositBlocktradesBridge extends React.Component {
 
         return (
             <div className={!addressValue ? "no-overflow" : ""}>
-                <p><Translate unsafe content="gateway.purchase_1" inputAsset={inputName} outputAsset={receiveName} />.</p>
+                <p><Translate component="p" unsafe content="gateway.purchase_1" inputAsset={inputName} outputAsset={receiveName} />.</p>
 
                 {this._renderCurrentBalance()}
 
@@ -342,7 +343,6 @@ class SimpleDepositBlocktradesBridge extends React.Component {
         }
 
         const {name: assetName, prefix} = utils.replaceName(asset.get("symbol"), !!asset.get("bitasset"));
-
         return (
             <div className="SimpleTrade__modal">
                 <div className="Modal__header">
@@ -359,7 +359,10 @@ class SimpleDepositBlocktradesBridge extends React.Component {
                         paddingTop: "1rem"
                     }}>
 
-                    {this._renderDeposit()}
+                    {this.props.isDown ?
+                        <div><Translate className="txtlabel cancel" content="gateway.unavailable_TRADE" component="p" /></div> :
+                        !this.props.isAvailable ? <div><Translate className="txtlabel cancel" content="gateway.unavailable" component="p" /></div> :
+                        this._renderDeposit()}
                 </div>
             </div>
         );
diff --git a/app/components/Dashboard/SimpleDepositWithdraw.jsx b/app/components/Dashboard/SimpleDepositWithdraw.jsx
index aad36e5da8..ffc6c64194 100644
--- a/app/components/Dashboard/SimpleDepositWithdraw.jsx
+++ b/app/components/Dashboard/SimpleDepositWithdraw.jsx
@@ -531,7 +531,6 @@ class DepositWithdrawContent extends DecimalChecker {
 
     render() {
         let {asset, action} = this.props;
-
         let isDeposit = action === "deposit";
 
         if (!asset) {
@@ -540,6 +539,12 @@ class DepositWithdrawContent extends DecimalChecker {
 
         const {name: assetName} = utils.replaceName(asset.get("symbol"), true);
 
+        let content = this.props.isDown ?
+            <div><Translate className="txtlabel cancel" content="gateway.unavailable_OPEN" component="p" /></div> :
+            !this.props.isAvailable ?
+            <div><Translate className="txtlabel cancel" content="gateway.unavailable" component="p" /></div> :
+            isDeposit ? this._renderDeposit() : this._renderWithdraw();
+
         return (
             <div className="SimpleTrade__modal">
                 <div className="Modal__header">
@@ -556,7 +561,7 @@ class DepositWithdrawContent extends DecimalChecker {
                         paddingTop: "1rem"
                     }}>
 
-                    {isDeposit ? this._renderDeposit() : this._renderWithdraw()}
+                    {content}
                 </div>
             </div>
         );
diff --git a/app/stores/GatewayStore.js b/app/stores/GatewayStore.js
index 48abb71fe2..60a68dc1b4 100644
--- a/app/stores/GatewayStore.js
+++ b/app/stores/GatewayStore.js
@@ -11,6 +11,7 @@ class GatewayStore {
         this.backedCoins = Immutable.Map(ss.get("backedCoins", {}));
         this.bridgeCoins = Immutable.Map(Immutable.fromJS(ss.get("bridgeCoins", {})));
         this.bridgeInputs = ["btc", "dash", "eth", "steem"];
+        this.down = Immutable.Map({});
 
         this.bindListeners({
             onFetchCoins: GatewayActions.fetchCoins,
@@ -19,38 +20,52 @@ class GatewayStore {
         });
     }
 
-    onFetchCoins({backer, coins, backedCoins} = {}) {
+    onFetchCoins({backer, coins, backedCoins, down} = {}) {
         if (backer && coins) {
             this.backedCoins = this.backedCoins.set(backer, backedCoins);
 
             ss.set("backedCoins", this.backedCoins.toJS());
+
+            this.down = this.down.set(backer, false);
         }
-    }
 
-    onFetchCoinsSimple({backer, coins} = {}) {
+        if( down ) {
+            this.down = this.down.set(down, true);
+        }
+    }
 
+    onFetchCoinsSimple({backer, coins, down} = {}) {
         if (backer && coins) {
             this.backedCoins = this.backedCoins.set(backer, coins);
 
             ss.set("backedCoins", this.backedCoins.toJS());
+
+            this.down = this.down.set(backer, false);
+        }
+
+        if( down ) {
+            this.down = this.down.set(down, true);
         }
     }
 
-    onFetchBridgeCoins({coins, bridgeCoins, wallets} = {}) {
+    onFetchBridgeCoins({coins, bridgeCoins, wallets, down} = {}) {
         if (coins && bridgeCoins) {
             let coins_by_type = {};
             coins.forEach(coin_type => coins_by_type[coin_type.coinType] = coin_type);
             bridgeCoins = bridgeCoins.filter(a => {
                 return a && coins_by_type[a.outputCoinType] && (
-                    wallets.indexOf(coins_by_type[a.outputCoinType].walletType) !== -1 && // Remove inactive wallets
                     coins_by_type[a.outputCoinType].walletType === "bitshares2" && // Only use bitshares2 wallet types
                     this.bridgeInputs.indexOf(a.inputCoinType) !== -1 // Only use coin types defined in bridgeInputs
                 );
             }).forEach(coin => {
+                coin.isAvailable = wallets.indexOf(coins_by_type[coin.outputCoinType].walletType) !== -1;
                 this.bridgeCoins = this.bridgeCoins.setIn([coins_by_type[coin.outputCoinType].walletSymbol, coin.inputCoinType], Immutable.fromJS(coin));
             });
             ss.set("bridgeCoins", this.bridgeCoins.toJS());
         }
+        if( down ) {
+            this.down = this.down.set(down, true);
+        }
     }
 }
 

From 0a13811eced1723ca06bcd8e7664d239fefb882b Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 10:48:52 +0200
Subject: [PATCH 53/82] Add whitelisting to asset update page fix #70 and fix
 #462

---
 app/actions/AssetActions.js                   |  12 +-
 app/assets/locales/locale-en.json             |  13 +-
 .../stylesheets/components/_account.scss      |  31 +--
 app/assets/stylesheets/components/_forms.scss |   1 +
 app/components/Account/AccountAssetUpdate.jsx | 102 +++++-----
 app/components/Account/AccountAssets.jsx      |   2 +-
 app/components/Account/AccountWhitelist.jsx   |   2 +-
 app/components/Account/AssetWhitelist.jsx     | 177 ++++++++++++++++++
 app/components/Utility/AssetSelector.jsx      |  25 ++-
 9 files changed, 297 insertions(+), 68 deletions(-)
 create mode 100644 app/components/Account/AssetWhitelist.jsx

diff --git a/app/actions/AssetActions.js b/app/actions/AssetActions.js
index 764885a2e8..ac680fe460 100644
--- a/app/actions/AssetActions.js
+++ b/app/actions/AssetActions.js
@@ -138,7 +138,7 @@ class AssetActions {
     }
 
     updateAsset(issuer, new_issuer, update, core_exchange_rate, asset, flags, permissions,
-            isBitAsset, bitasset_opts, original_bitasset_opts, description) {
+            isBitAsset, bitasset_opts, original_bitasset_opts, description, auths) {
 
         // Create asset action here...
         let tr = wallet_api.new_transaction();
@@ -155,7 +155,7 @@ class AssetActions {
 
         let cr_quote_amount = (new big(core_exchange_rate.quote.amount)).times(cr_quote_precision).toString();
         let cr_base_amount = (new big(core_exchange_rate.base.amount)).times(cr_base_precision).toString();
-
+        console.log("auths:", auths);
         let updateObject = {
             fee: {
                 amount: 0,
@@ -172,10 +172,10 @@ class AssetActions {
                 description: description,
                 issuer_permissions: permissions,
                 flags: flags,
-                whitelist_authorities: asset.getIn(["options", "whitelist_authorities"]),
-                blacklist_authorities: asset.getIn(["options", "blacklist_authorities"]),
-                whitelist_markets: asset.getIn(["options", "whitelist_markets"]),
-                blacklist_markets: asset.getIn(["options", "blacklist_markets"]),
+                whitelist_authorities: auths.whitelist_authorities.toJS(),
+                blacklist_authorities: auths.blacklist_authorities.toJS(),
+                whitelist_markets: auths.whitelist_markets.toJS(),
+                blacklist_markets: auths.blacklist_markets.toJS(),
                 extensions: asset.getIn(["options", "extensions"]),
                 core_exchange_rate: {
                     quote: {
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 07bff72b3e..0e85293b49 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -126,7 +126,9 @@
       "white_by": "Whitelisted by",
       "black_by": "Blacklisted by",
       "empty_white_by": "No accounts have whitelisted %(account)s.",
-      "empty_black_by": "No accounts have blacklisted %(account)s."
+      "empty_black_by": "No accounts have blacklisted %(account)s.",
+      "whitelist_authorities": "Whitelist authority",
+      "blacklist_authorities": "Blacklist authority"
     },
     "vesting": {
       "title": "Vesting balances",
@@ -733,7 +735,14 @@
         "maximum_short_squeeze_ratio": "MSSR",
         "publisher": "Publisher",
         "published": "Published"
-      }
+      },
+      "whitelist": {
+            "whitelist_authorities": "Whitelist authorities",
+            "blacklist_authorities": "Blacklist authorities",
+            "whitelist_markets": "Market whitelist",
+            "blacklist_markets": "Market blacklist",
+            "enable_flag": "The whitelist flag must be enabled in order to set whitelist authorities"
+        }
     },
     "witnesses": {
       "title": "Witnesses",
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index a4a65ca7e6..88947e3c79 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -108,6 +108,23 @@ a.action-button > span {
     text-transform: lowercase;
 }
 
+div.hide-selector {
+    padding-bottom: 10px;
+    > div {
+        font-size: 1.15rem;
+        cursor: pointer;
+        &:nth-of-type(n + 2) {
+            padding-left: 10px;
+        }
+        &.inactive {
+            color: grey;
+        }
+        &:hover.inactive {
+            color: inherit;
+        }
+    }
+}
+
 div.overview-tabs {
     > div.service-selector {
         margin-bottom: 0;
@@ -116,20 +133,6 @@ div.overview-tabs {
 
     div.hide-selector {
         padding-left: 5px;
-        padding-bottom: 10px;
-        > div {
-            font-size: 1.15rem;
-            cursor: pointer;
-            &:first-of-type {
-                padding-right: 10px;
-            }
-            &.inactive {
-                color: grey;
-            }
-            &:hover.inactive {
-                color: inherit;
-            }
-        }
     }
 
     > div.tab-content {
diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss
index 23fc211616..cbc4247d54 100644
--- a/app/assets/stylesheets/components/_forms.scss
+++ b/app/assets/stylesheets/components/_forms.scss
@@ -250,6 +250,7 @@ div.transfer-input {
 
 div.input-wrapper {
     position: relative;
+    width: 100%;
     div.floating-dropdown {
         background: transparent;
         position: absolute;
diff --git a/app/components/Account/AccountAssetUpdate.jsx b/app/components/Account/AccountAssetUpdate.jsx
index 502c647e6a..fb1812fdbe 100644
--- a/app/components/Account/AccountAssetUpdate.jsx
+++ b/app/components/Account/AccountAssetUpdate.jsx
@@ -20,6 +20,7 @@ import assetUtils from "common/asset_utils";
 import {Tabs, Tab} from "../Utility/Tabs";
 import {BitAssetOptions} from "./AccountAssetCreate";
 import assetConstants from "chain/asset_constants";
+import AssetWhitelist from "./AssetWhitelist";
 
 let MAX_SAFE_INT = new big("9007199254740991");
 
@@ -57,13 +58,8 @@ class AccountAssetUpdate extends React.Component {
             (new big(core_exchange_rate.base.amount)).div(precision).toString() :
             (new big(core_exchange_rate.base.amount)).div(corePrecision).toString();
 
-        console.log("isBitAsset:", isBitAsset);
-
         let flagBooleans = assetUtils.getFlagBooleans(asset.options.flags, isBitAsset);
         let permissionBooleans = assetUtils.getFlagBooleans(asset.options.issuer_permissions, isBitAsset);
-        let flags = assetUtils.getFlags(flagBooleans);
-        let permissions = assetUtils.getPermissions(permissionBooleans, isBitAsset);
-        console.log("permissions:", permissions, asset);
         asset.options.market_fee_percent /= 100;
 
         let coreRateQuoteAssetName = ChainStore.getAsset(core_exchange_rate.quote.asset_id).get("symbol");
@@ -78,7 +74,7 @@ class AccountAssetUpdate extends React.Component {
             },
             core_exchange_rate: core_exchange_rate,
             issuer: asset.issuer,
-            new_issuer_account: null,
+            new_issuer_account_id: null,
             issuer_account_name: null,
             new_funder_account: props.account.get("id"),
             funder_account_name: props.account.get("name"),
@@ -86,6 +82,8 @@ class AccountAssetUpdate extends React.Component {
             errors: {
                 max_supply: null
             },
+            new_authority_id: null,
+            authority_name: null,
             isValid: true,
             flagBooleans: flagBooleans,
             permissionBooleans: permissionBooleans,
@@ -98,7 +96,11 @@ class AccountAssetUpdate extends React.Component {
             claimFeesAmount: 0,
             bitasset_opts: isBitAsset ? asset.bitasset.options : null,
             original_bitasset_opts: isBitAsset ? props.asset.getIn(["bitasset", "options"]).toJS() : null,
-            marketInput: ""
+            marketInput: "",
+            whitelist_authorities: props.asset.getIn(["options", "whitelist_authorities"]),
+            blacklist_authorities: props.asset.getIn(["options", "blacklist_authorities"]),
+            whitelist_markets: props.asset.getIn(["options", "whitelist_markets"]),
+            blacklist_markets: props.asset.getIn(["options", "blacklist_markets"])
         };
     }
 
@@ -106,7 +108,7 @@ class AccountAssetUpdate extends React.Component {
 
     _updateAsset(e) {
         e.preventDefault();
-        let {update, issuer, new_issuer_account, core_exchange_rate, flagBooleans,
+        let {update, issuer, new_issuer_account_id, core_exchange_rate, flagBooleans,
             permissionBooleans, isBitAsset, bitasset_opts, original_bitasset_opts} = this.state;
 
         let flags = assetUtils.getFlags(flagBooleans);
@@ -117,17 +119,22 @@ class AccountAssetUpdate extends React.Component {
         }
         let permissions = assetUtils.getPermissions(permissionBooleans, isBitAsset);
 
-        let cr_quote_asset = ChainStore.getAsset(core_exchange_rate.quote.asset_id);
-        let cr_base_asset = ChainStore.getAsset(core_exchange_rate.base.asset_id);
-
         if (this.state.marketInput !== update.description.market) {
             update.description.market = "";
         }
         let description = JSON.stringify(update.description);
 
-        AssetActions.updateAsset(issuer, new_issuer_account, update, core_exchange_rate, this.props.asset,
-            flags, permissions, isBitAsset, bitasset_opts, original_bitasset_opts, description).then(result => {
-            console.log("... AssetActions.updateAsset(account_id, update)", issuer, new_issuer_account, this.props.asset.get("id"), update)
+        let auths = {
+            whitelist_authorities: this.state.whitelist_authorities,
+            blacklist_authorities: this.state.blacklist_authorities,
+            whitelist_markets: this.state.whitelist_markets,
+            blacklist_markets: this.state.blacklist_markets
+        };
+
+        AssetActions.updateAsset(issuer, new_issuer_account_id, update, core_exchange_rate, this.props.asset,
+            flags, permissions, isBitAsset, bitasset_opts, original_bitasset_opts, description, auths)
+        .then(() => {
+            console.log("... AssetActions.updateAsset(account_id, update)", issuer, new_issuer_account_id, this.props.asset.get("id"), update);
             setTimeout(() => {
                 AssetActions.getAsset(this.props.asset.get("id"));
             }, 3000);
@@ -297,29 +304,15 @@ class AccountAssetUpdate extends React.Component {
         this.forceUpdate();
     }
 
-    onIssuerAccountChanged(account) {
-        // console.log("onIssuerAccountChanged", account.get("symbol"));
-        this.setState({
-            new_issuer_account: account ? account.get("id") : null
-        });
-    }
-
-    issuerNameChanged(name) {
+    onAccountChanged(key, account) {
         this.setState({
-            issuer_account_name: name
+            [key]: account ? account.get("id") : null
         });
     }
 
-    onFunderAccountChanged(account) {
-        // console.log("onIssuerAccountChanged", account.get("symbol"));
+    onAccountNameChanged(key, name) {
         this.setState({
-            new_funder_account: account ? account.get("id") : null
-        });
-    }
-
-    funderNameChanged(name) {
-        this.setState({
-            funder_account_name: name
+            [key]: name
         });
     }
 
@@ -387,7 +380,7 @@ class AccountAssetUpdate extends React.Component {
         });
     }
 
-    _onFundPool(e) {
+    _onFundPool() {
         AssetActions.fundPool(this.state.new_funder_account, this.props.core, this.props.asset, this.state.fundPoolAmount.replace( /,/g, "" ));
     }
 
@@ -397,14 +390,23 @@ class AccountAssetUpdate extends React.Component {
         });
     }
 
-    _onClaimFees(e) {
-
+    _onClaimFees() {
         AssetActions.claimPoolFees(this.props.account.get("id"), this.props.asset, this.state.claimFeesAmount.replace( /,/g, "" ));
     }
 
+    onChangeList(key, action = "add", id) {
+        let current = this.state[key];
+        if (action === "add" && !current.includes(id)) {
+            current = current.push(id);
+        } else if (action === "remove" && current.includes(id)) {
+            current = current.remove(current.indexOf(id));
+        }
+        this.setState({[key]: current});
+    }
+
     render() {
-        let {account, account_name, asset, core} = this.props;
-        let {errors, isValid, update, assets, core_exchange_rate, flagBooleans,
+        let {account, asset, core} = this.props;
+        let {errors, isValid, update, core_exchange_rate, flagBooleans,
             permissionBooleans, fundPoolAmount, claimFeesAmount, isBitAsset, bitasset_opts} = this.state;
 
         // Estimate the asset update fee
@@ -422,7 +424,6 @@ class AccountAssetUpdate extends React.Component {
         let cr_base_amount = (new big(core_exchange_rate.base.amount)).times(basePrecision).toString();
 
         let originalPermissions = assetUtils.getFlagBooleans(asset.getIn(["options", "issuer_permissions"]), asset.get("bitasset") !== undefined);
-
         // Loop over flags
         let flags = [];
         let getFlag = (key, onClick, isChecked)=>{
@@ -632,6 +633,23 @@ class AccountAssetUpdate extends React.Component {
 
                             </Tab>
 
+                            <Tab title="account.whitelist.title">
+                                <AssetWhitelist
+                                    whiteListEnabled={flagBooleans["white_list"]}
+                                    whitelist_authorities={this.state.whitelist_authorities}
+                                    blacklist_authorities={this.state.blacklist_authorities}
+                                    whitelist_markets={this.state.whitelist_markets}
+                                    blacklist_markets={this.state.blacklist_markets}
+                                    new_authority_id={this.state.new_authority_id}
+                                    authority_name={this.state.authority_name}
+                                    onAccountNameChanged={this.onAccountNameChanged.bind(this)}
+                                    onAccountChanged={this.onAccountChanged.bind(this)}
+                                    onChangeList={this.onChangeList.bind(this)}
+                                >
+                                    {confirmButtons}
+                                </AssetWhitelist>
+                            </Tab>
+
                             <Tab title="account.user_issued_assets.description">
                                 <div className="small-12 large-8 grid-content">
                                     <Translate component="h3" content="account.user_issued_assets.description" />
@@ -723,8 +741,8 @@ class AccountAssetUpdate extends React.Component {
                                     <AccountSelector
                                         label="account.user_issued_assets.new_issuer"
                                         accountName={this.state.issuer_account_name}
-                                        onChange={this.issuerNameChanged.bind(this)}
-                                        onAccountChanged={this.onIssuerAccountChanged.bind(this)}
+                                        onChange={this.onAccountNameChanged.bind(this, "issuer_account_name")}
+                                        onAccountChanged={this.onAccountChanged.bind(this, "new_issuer_account_id")}
                                         account={this.state.issuer_account_name}
                                         error={null}
                                         tabIndex={1}
@@ -809,8 +827,8 @@ class AccountAssetUpdate extends React.Component {
                                     <AccountSelector
                                         label="transaction.funding_account"
                                         accountName={this.state.funder_account_name}
-                                        onChange={this.funderNameChanged.bind(this)}
-                                        onAccountChanged={this.onFunderAccountChanged.bind(this)}
+                                        onChange={this.onAccountNameChanged.bind(this, "funder_account_name")}
+                                        onAccountChanged={this.onAccountChanged.bind(this, "new_funder_account")}
                                         account={this.state.funder_account_name}
                                         error={null}
                                         tabIndex={1}
diff --git a/app/components/Account/AccountAssets.jsx b/app/components/Account/AccountAssets.jsx
index f45e4692f8..74016c01ca 100644
--- a/app/components/Account/AccountAssets.jsx
+++ b/app/components/Account/AccountAssets.jsx
@@ -251,7 +251,7 @@ class AccountAssets extends React.Component {
                             <Translate content="account.user_issued_assets.issued_assets" />
                         </div>
                         <div className="box-content">
-                            <table className="table">
+                            <table className="table dashboard-table">
                                 <thead>
                                 <tr>
                                     <th><Translate content="account.user_issued_assets.symbol" /></th>
diff --git a/app/components/Account/AccountWhitelist.jsx b/app/components/Account/AccountWhitelist.jsx
index 10f21b99c8..9ba7fdb152 100644
--- a/app/components/Account/AccountWhitelist.jsx
+++ b/app/components/Account/AccountWhitelist.jsx
@@ -83,7 +83,7 @@ class AccountList extends React.Component {
         }
 
         return (
-            <table className="table compact">
+            <table className="table compact dashboard-table">
                 {showHeaders ? (
                     <thead>
                         <tr>
diff --git a/app/components/Account/AssetWhitelist.jsx b/app/components/Account/AssetWhitelist.jsx
new file mode 100644
index 0000000000..c0df92b1b2
--- /dev/null
+++ b/app/components/Account/AssetWhitelist.jsx
@@ -0,0 +1,177 @@
+import React from "react";
+import LinkToAccountById from "../Utility/LinkToAccountById";
+import LinkToAssetById from "../Utility/LinkToAssetById";
+import Icon from "../Icon/Icon";
+import AccountSelector from "../Account/AccountSelector";
+import AssetSelector from "../Utility/AssetSelector";
+import cnames from "classnames";
+import Translate from "react-translate-component";
+import { connect } from "alt-react";
+import SettingsStore from "stores/SettingsStore";
+import SettingsActions from "actions/SettingsActions";
+
+class AssetWhitelist extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.state = {
+            listType: props.assetWhiteListType,
+            accountTable: props.assetWhiteListType.indexOf("market") === -1,
+            listTypes: [
+                "whitelist_authorities",
+                "blacklist_authorities",
+                "whitelist_markets",
+                "blacklist_markets"
+            ],
+            assetInput: null,
+            asset_id: null
+        };
+    }
+
+    renderAccountTables() {
+        const {listType} = this.state;
+
+        if (!this.props.whiteListEnabled)
+            return <div><Translate className="txtlabel cancel" component="p" content="explorer.asset.whitelist.enable_flag" /></div>;
+
+        return (
+            <div>
+                <table className="table dashboard-table">
+                    <thead>
+                        <tr>
+                            <th><Translate content="explorer.account.title" /></th>
+                            <th><Translate content="account.perm.remove_text" /></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {this.props[listType].map(a => {
+                            return (
+                                <tr key={a}>
+                                    <td><LinkToAccountById account={a} /></td>
+                                    <td className="clickable" onClick={this.props.onChangeList.bind(this, listType, "remove", a)}>
+                                        <Icon name="cross-circle" className="icon-14px" />
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+                <div style={{paddingTop: "2rem"}}>
+                    <AccountSelector
+                        label={`account.whitelist.${listType}`}
+                        accountName={this.props.authority_name}
+                        account={this.props.authority_name}
+                        onChange={this.props.onAccountNameChanged.bind(this, "authority_name")}
+                        onAccountChanged={this.props.onAccountChanged.bind(this, "new_authority_id")}
+                        error={null}
+                        tabIndex={1}
+                        action_label="account.perm.confirm_add"
+                        onAction={this.props.onChangeList.bind(this, listType, "add", this.props.new_authority_id)}
+                     />
+                 </div>
+             </div>
+        );
+    }
+
+    _onAssetChange(asset) {
+        this.setState({
+            assetInput: asset
+        });
+    }
+
+    _onAssetFound(asset) {
+        this.setState({
+            asset_id: asset ? asset.get("id") : null
+        });
+    }
+
+    renderMarketTable() {
+        const {listType} = this.state;
+
+        return (
+            <div>
+                <table className="table dashboard-table">
+                    <thead>
+                        <tr>
+                            <th><Translate content="explorer.asset.title" /></th>
+                            <th><Translate content="account.perm.remove_text" /></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {this.props[listType].map(a => {
+                            return (
+                                <tr key={a}>
+                                    <td><LinkToAssetById asset={a} /></td>
+                                    <td className="clickable" onClick={this.props.onChangeList.bind(this, listType, "remove", a)}>
+                                        <Icon name="cross-circle" className="icon-14px" />
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+                <div style={{paddingTop: "2rem"}}>
+                    <AssetSelector
+                        label={`explorer.asset.whitelist.${listType}`}
+                        onChange={this._onAssetChange.bind(this)}
+                        asset={this.state.assetInput}
+                        assetInput={this.state.assetInput}
+                        tabIndex={1}
+                        style={{width: "100%"}}
+                        onFound={this._onAssetFound.bind(this)}
+                        action_label="account.perm.confirm_add"
+                        onAction={this.props.onChangeList.bind(this, listType, "add", this.state.asset_id)}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    _onSwitchType(type) {
+        this.setState({
+            listType: type,
+            accountTable: type.indexOf("market") === -1
+        });
+        SettingsActions.changeViewSetting({
+            assetWhiteListType: type
+        });
+    }
+
+    render() {
+        const {accountTable} = this.state;
+        const activeIndex = this.state.listTypes.indexOf(this.state.listType);
+
+        return (
+            <div className="small-12 large-8 grid-content">
+                <div>
+                    <div className="hide-selector" style={{paddingBottom: "2rem"}}>
+                        {this.state.listTypes.map((type, index) => {
+                            return (
+                                <div key={type} className={cnames("inline-block", {inactive: activeIndex !== index})} onClick={this._onSwitchType.bind(this, type)}>
+                                    <Translate content={`explorer.asset.whitelist.${type}`} />
+                                </div>
+                            );
+                        })}
+                    </div>
+                    {accountTable ? this.renderAccountTables() : this.renderMarketTable()}
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect(AssetWhitelist, {
+    listenTo() {
+        return [SettingsStore];
+    },
+    getProps() {
+        return {
+            assetWhiteListType: SettingsStore.getState().viewSettings.get(
+                "assetWhiteListType",
+                "whitelist_authorities"
+            )
+        };
+    }
+});
diff --git a/app/components/Utility/AssetSelector.jsx b/app/components/Utility/AssetSelector.jsx
index c8c055d090..b700aabaae 100644
--- a/app/components/Utility/AssetSelector.jsx
+++ b/app/components/Utility/AssetSelector.jsx
@@ -7,6 +7,7 @@ import counterpart from "counterpart";
 import FloatingDropdown from "./FloatingDropdown";
 import FormattedAsset from "./FormattedAsset";
 import Immutable from "immutable";
+import classnames from "classnames";
 
 class AssetDropdown extends React.Component {
 
@@ -84,7 +85,10 @@ class AssetSelector extends React.Component {
     }
 
     onKeyDown(event) {
-        if (event.keyCode === 13) this.onFound(event);
+        if (event.keyCode === 13) {
+            this.onFound(event);
+            this.onAction(event);
+        }
     }
 
     componentDidMount() {
@@ -112,6 +116,14 @@ class AssetSelector extends React.Component {
         }
     }
 
+    onAction(e) {
+        e.preventDefault();
+        if(this.props.onAction && !this.getError() && !this.props.disableActionButton) {
+            if (this.props.asset)
+                this.props.onAction(this.props.asset);
+        }
+    }
+
     render() {
         let {disabled, noLabel} = this.props;
         let error = this.getError();
@@ -123,6 +135,9 @@ class AssetSelector extends React.Component {
                 error = counterpart.translate("explorer.asset.not_found", {name: this.props.assetInput});
             }
         }
+
+        let action_class = classnames("button", {"disabled" : !(this.props.asset) || error || this.props.disableActionButton});
+
         return (
             <div className="asset-selector" style={this.props.style}>
                 <div>
@@ -153,7 +168,13 @@ class AssetSelector extends React.Component {
                                 />) : null}
                         </div>
                         { this.props.children }
-                    </div>
+                        { this.props.onAction ? (
+                            <button className={action_class}
+                                onClick={this.onAction.bind(this)}>
+                                <Translate content={this.props.action_label}/>
+                            </button>
+                            ) : null }
+                        </div>
                     </div>
                     <div className="error-area" style={{paddingBottom: "10px"}}>
                         <span style={{wordBreak: "break-all"}}>{error}</span>

From c8c8d0b2120bc7aa6e8c5ad77ac937a5bd072aab Mon Sep 17 00:00:00 2001
From: Calvin Froedge <calvinfroedge@gmail.com>
Date: Thu, 12 Oct 2017 03:54:38 -0500
Subject: [PATCH 54/82] Clear transfer form once completed (#564)

---
 app/components/Transfer/Transfer.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/components/Transfer/Transfer.jsx b/app/components/Transfer/Transfer.jsx
index 516247cbb8..e9ecf61abb 100644
--- a/app/components/Transfer/Transfer.jsx
+++ b/app/components/Transfer/Transfer.jsx
@@ -238,6 +238,10 @@ class Transfer extends React.Component {
         this.setState({ propose_account });
     }
 
+    resetForm(){
+        this.setState({memo: '', to_name: '', amount: ''});
+    }
+
     onSubmit(e) {
         e.preventDefault();
         this.setState({error: null});
@@ -253,6 +257,7 @@ class Transfer extends React.Component {
             this.state.propose ? this.state.propose_account : null,
             this.state.feeAsset ? this.state.feeAsset.get("id") : "1.3.0"
         ).then( () => {
+            this.resetForm.call(this);
             TransactionConfirmStore.unlisten(this.onTrxIncluded);
             TransactionConfirmStore.listen(this.onTrxIncluded);
         }).catch( e => {

From d8c1ae1231a9c8aa0525999f87f8c0ecc70e0b4c Mon Sep 17 00:00:00 2001
From: Abit <abitmore@users.noreply.github.com>
Date: Thu, 12 Oct 2017 11:01:12 +0200
Subject: [PATCH 55/82] Round up `for_sale` and down `to_receive`, #562 (#565)

---
 app/components/Exchange/Exchange.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Exchange/Exchange.jsx b/app/components/Exchange/Exchange.jsx
index dfa61e7f53..8cebd1facf 100644
--- a/app/components/Exchange/Exchange.jsx
+++ b/app/components/Exchange/Exchange.jsx
@@ -737,7 +737,7 @@ class Exchange extends React.Component {
 
     _setReceive(state, isBid) {
         if (state.price.isValid() && state.for_sale.hasAmount()) {
-            state.to_receive = state.for_sale.times(state.price, isBid);
+            state.to_receive = state.for_sale.times(state.price);
             state.toReceiveText = state.to_receive.getAmount({real: true}).toString();
             return true;
         }
@@ -746,7 +746,7 @@ class Exchange extends React.Component {
 
     _setForSale(state, isBid) {
         if (state.price.isValid() && state.to_receive.hasAmount()) {
-            state.for_sale = state.to_receive.times(state.price, isBid);
+            state.for_sale = state.to_receive.times(state.price, true);
             state.forSaleText = state.for_sale.getAmount({real: true}).toString();
             return true;
         }

From 9bb71850018a0f7a6255a7fe574afedac773c0d1 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 11:28:57 +0200
Subject: [PATCH 56/82] Use new tables styling in dashboard, add
 accounts/recent switching

---
 .../stylesheets/components/_account.scss      |   2 +
 .../stylesheets/themes/_theme-template.scss   |   4 +-
 app/components/Dashboard/Dashboard.jsx        | 177 ++++++------------
 .../Dashboard/DashboardContainer.jsx          |   3 +-
 app/components/Dashboard/DashboardList.jsx    |   2 +-
 5 files changed, 61 insertions(+), 127 deletions(-)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index 88947e3c79..696f321d7a 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -183,11 +183,13 @@ table.table.dashboard-table {
         > td {
             font-size: 0.9rem;
             text-align: center;
+            border: 1px solid;
         }
         &.total-value {
             td {
                 vertical-align: middle;
                 padding: 8px 5px;
+                border-bottom: none;
             }
             td:first-of-type {
                 text-align: left;
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index a71e3c16b3..914cd86653 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -611,7 +611,7 @@
       }
   }
 
-  .my-account h5, .my-account h4, td.my-account {
+  .my-account h5, .my-account h4, table.table > tbody > tr > td.my-account > span {
     font-weight: bold;
     color: $info-color;
   }
@@ -1284,7 +1284,7 @@
             > td {
                 background-color: $account-cells;
                 color: $account-primarytext;
-                border: 1px solid $account-border;
+                border-color: $account-border;
                 .icon > svg > path {
                     fill: $account-primarytext;
                 }
diff --git a/app/components/Dashboard/Dashboard.jsx b/app/components/Dashboard/Dashboard.jsx
index b15558b203..4318783b08 100644
--- a/app/components/Dashboard/Dashboard.jsx
+++ b/app/components/Dashboard/Dashboard.jsx
@@ -6,15 +6,14 @@ import Translate from "react-translate-component";
 import MarketCard from "./MarketCard";
 import utils from "common/utils";
 import { Apis } from "bitsharesjs-ws";
-var logo = require("assets/logo-ico-blue.png");
 import LoadingIndicator from "../LoadingIndicator";
-import SettingsActions from "actions/SettingsActions";
-import WalletUnlockActions from "actions/WalletUnlockActions";
 import LoginSelector from "../LoginSelector";
+import cnames from "classnames";
+import SettingsActions from "actions/SettingsActions";
 
 class Dashboard extends React.Component {
 
-    constructor() {
+    constructor(props) {
         super();
         let marketsByChain = {
             "4018d784":[
@@ -76,7 +75,8 @@ class Dashboard extends React.Component {
             featuredMarkets: marketsByChain[chainID] || marketsByChain["4018d784"],
             newAssets: [
 
-            ]
+            ],
+            currentEntry: props.currentEntry
         };
 
         this._setDimensions = this._setDimensions.bind(this);
@@ -100,7 +100,8 @@ class Dashboard extends React.Component {
             nextProps.passwordAccount !== this.props.passwordAccount ||
             nextState.width !== this.state.width ||
             nextProps.accountsReady !== this.props.accountsReady ||
-            nextState.showIgnored !== this.state.showIgnored
+            nextState.showIgnored !== this.state.showIgnored ||
+            nextState.currentEntry !== this.state.currentEntry
         );
     }
 
@@ -122,67 +123,18 @@ class Dashboard extends React.Component {
         });
     }
 
-    // _sortMarketsByVolume(a, b) {
-    //     let idA = a[1] + "_" + a[0];
-    //     let idB = b[1] + "_" + b[0];
-    //     let statsA = this.props.marketStats.get(idA);
-    //     let statsB = this.props.marketStats.get(idB);
-    //     if (!statsA || !statsB) return -1;
-    //
-    //     function getEquivalentVolume(stats, market, marketStats) {
-    //         let coreVolume = stats.volumeBaseAsset.asset_id === "1.3.0" ? stats.volumeBaseAsset :
-    //            stats.volumeQuoteAsset.asset_id === "1.3.0" ? stats.volumeQuoteAsset : 0;
-    //
-    //         if (!coreVolume) {
-    //             let options = [
-    //                 `${market[1]}_BTS`,
-    //                 `BTS_${market[1]}`,
-    //                 `${market[0]}_BTS`,
-    //                 `BTS_${market[0]}`,
-    //             ];
-    //             let convertUsingStats;
-    //             for (var i = 0; i < options.length; i++) {
-    //                 convertUsingStats = marketStats.get(options[i]);
-    //                 if (convertUsingStats) break;
-    //             }
-    //
-    //             if (convertUsingStats && convertUsingStats.price) {
-    //                 if (convertUsingStats.price.base.asset_id === "1.3.0") {
-    //                     if (stats.volumeBaseAsset.asset_id === convertUsingStats.price.quote.asset_id) {
-    //                         coreVolume = stats.volumeBaseAsset.times(convertUsingStats.price);
-    //                     } else if (stats.volumeQuoteAsset.asset_id === convertUsingStats.price.quote.asset_id) {
-    //                         coreVolume = stats.volumeQuoteAsset.times(convertUsingStats.price);
-    //                     }
-    //                 } else if (convertUsingStats.price.quote.asset_id === "1.3.0") {
-    //                     if (stats.volumeBaseAsset.asset_id === convertUsingStats.price.base.asset_id) {
-    //                         coreVolume = stats.volumeBaseAsset.times(convertUsingStats.price);
-    //                     } else if (stats.volumeQuoteAsset.asset_id === convertUsingStats.price.base.asset_id) {
-    //                         coreVolume = stats.volumeQuoteAsset.times(convertUsingStats.price);
-    //                     }
-    //                 }
-    //
-    //                 console.log(market, "coreVolume", coreVolume && coreVolume.getAmount(), coreVolume && coreVolume.asset_id);
-    //
-    //             } else {
-    //                 console.log(market, "*** Unable to convert price ***");
-    //             }
-    //         }
-    //
-    //         return coreVolume;
-    //     }
-    //
-    //     let coreVolumeA = getEquivalentVolume(statsA, a, this.props.marketStats);
-    //     let coreVolumeB =  getEquivalentVolume(statsB, b, this.props.marketStats);
-    //
-    //     if (coreVolumeA && coreVolumeB) {
-    //         return coreVolumeB.getAmount() - coreVolumeA.getAmount();
-    //     }
-    //     return 0;
-    // }
+    _onSwitchType(type) {
+        this.setState({
+            currentEntry: type
+        });
+        SettingsActions.changeViewSetting({
+            dashboardEntry: type
+        });
+    }
 
     render() {
         let { linkedAccounts, myIgnoredAccounts, accountsReady, passwordAccount } = this.props;
-        let {width, showIgnored, featuredMarkets, newAssets} = this.state;
+        let {width, showIgnored, featuredMarkets, newAssets, currentEntry} = this.state;
 
         if (passwordAccount && !linkedAccounts.has(passwordAccount)) {
             linkedAccounts = linkedAccounts.add(passwordAccount);
@@ -200,7 +152,6 @@ class Dashboard extends React.Component {
         let validMarkets = 0;
 
         let markets = featuredMarkets
-        // .sort(this._sortMarketsByVolume)
         .map(pair => {
             let isLowVolume = this.props.lowVolumeMarkets.get(pair[1] + "_" + pair[0]) || this.props.lowVolumeMarkets.get(pair[0] + "_" + pair[1]);
             if (!isLowVolume) validMarkets++;
@@ -228,42 +179,11 @@ class Dashboard extends React.Component {
 
         if (!accountCount) {
             return <LoginSelector />;
-            // return (
-            //     <div ref="wrapper" className="grid-block page-layout vertical">
-            //         <div ref="container" className="grid-block vertical medium-horizontal"  style={{padding: "25px 10px 0 10px"}}>
-            //             <div className="grid-container">
-            //                 <div className="Dashboard__intro-text Account_create">
-            //                     <h4><img style={{position: "relative", top: -15, margin: 0}} src={logo}/><Translate content="account.intro_text_title" /></h4>
-            //
-            //                     <Translate unsafe content="account.intro_text_1" component="p" />
-            //                     <Translate unsafe content="account.intro_text_2" component="p" />
-            //                     <Translate unsafe content="account.intro_text_3" component="p" />
-            //                     <Translate unsafe content="account.intro_text_4" component="p" />
-            //                     <div className="button-group">
-            //                         <div className="button create-account" onClick={() => {this.props.router.push("create-account");}}>
-            //                             <Translate content="account.create_new" />
-            //                         </div>
-            //
-            //                         <div className="button create-account" onClick={() => {
-            //                             SettingsActions.changeSetting({setting: "passwordLogin", value: true});
-            //                             WalletUnlockActions.unlock.defer();
-            //                         }}>
-            //                             <Translate content="account.password_login" />
-            //                         </div>
-            //                     </div>
-            //                 </div>
-            //             </div>
-            //             {/* <div className="grid-container small-12 medium-7" style={{paddingTop: 44}}>
-            //                 <Translate content="exchange.featured" component="h4" style={{paddingLeft: 30}}/>
-            //                 <div className="grid-block small-up-1 large-up-3 xlarge-up-4 no-overflow fm-outer-container">
-            //                     {markets}
-            //                 </div>
-            //             </div> */}
-            //         </div>
-            //     </div>
-            // );
         }
 
+        const entries = ["accounts", "recent"];
+        const activeIndex = entries.indexOf(currentEntry);
+
         return (
             <div ref="wrapper" className="grid-block page-layout vertical">
                 <div ref="container" className="grid-container" style={{padding: "25px 10px 0 10px"}}>
@@ -274,31 +194,42 @@ class Dashboard extends React.Component {
                         {markets}
                     </div>
 
-                    {accountCount ? <div className="generic-bordered-box" style={{marginBottom: 5}}>
-                        <div className="block-content-header" style={{marginBottom: 15}}>
-                            <Translate content="account.accounts" />
+                    {accountCount ? (
+                        <div>
+                            <div className="hide-selector" style={{paddingBottom: "1rem"}}>
+                                {entries.map((type, index) => {
+                                    return (
+                                        <div key={type} className={cnames("inline-block", {inactive: activeIndex !== index})} onClick={this._onSwitchType.bind(this, type)}>
+                                            <Translate content={`account.${type}`} />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            {currentEntry === "accounts" ? <div className="generic-bordered-box" style={{marginBottom: 5}}>
+                                <div className="box-content">
+                                    <DashboardList
+                                        accounts={Immutable.List(names)}
+                                        ignoredAccounts={Immutable.List(ignored)}
+                                        width={width}
+                                        onToggleIgnored={this._onToggleIgnored.bind(this)}
+                                        showIgnored={showIgnored}
+                                    />
+                                    {/* {showIgnored ? <DashboardList accounts={Immutable.List(ignored)} width={width} /> : null} */}
+                                </div>
+                            </div> : null}
+
+                            {currentEntry === "recent" ? <RecentTransactions
+                                style={{marginBottom: 20, marginTop: 20}}
+                                accountsList={linkedAccounts}
+                                limit={10}
+                                compactView={false}
+                                fullHeight={true}
+                                showFilters={true}
+                                dashboard
+                            /> : null}
                         </div>
-                        <div className="box-content">
-                            <DashboardList
-                                accounts={Immutable.List(names)}
-                                ignoredAccounts={Immutable.List(ignored)}
-                                width={width}
-                                onToggleIgnored={this._onToggleIgnored.bind(this)}
-                                showIgnored={showIgnored}
-                            />
-                            {/* {showIgnored ? <DashboardList accounts={Immutable.List(ignored)} width={width} /> : null} */}
-                        </div>
-                    </div> : null}
-
-                    {accountCount ? <RecentTransactions
-                        style={{marginBottom: 20, marginTop: 20}}
-                        accountsList={linkedAccounts}
-                        limit={10}
-                        compactView={false}
-                        fullHeight={true}
-                        showFilters={true}
-                    /> : null}
-
+                    ) : null}
                 </div>
             </div>
         );
diff --git a/app/components/Dashboard/DashboardContainer.jsx b/app/components/Dashboard/DashboardContainer.jsx
index 7258c782a2..5b8ea403ea 100644
--- a/app/components/Dashboard/DashboardContainer.jsx
+++ b/app/components/Dashboard/DashboardContainer.jsx
@@ -26,7 +26,8 @@ class DashboardContainer extends React.Component {
                     },
                     lowVolumeMarkets: () => {
                         return MarketsStore.getState().lowVolumeMarkets;
-                    }
+                    },
+                    currentEntry: SettingsStore.getState().viewSettings.get("dashboardEntry", "accounts")
                 }}>
                 <Dashboard {...this.props} />
             </AltContainer>
diff --git a/app/components/Dashboard/DashboardList.jsx b/app/components/Dashboard/DashboardList.jsx
index d0a3bfd0db..fb3afee065 100644
--- a/app/components/Dashboard/DashboardList.jsx
+++ b/app/components/Dashboard/DashboardList.jsx
@@ -241,7 +241,7 @@ class DashboardList extends React.Component {
 							<Translate content={`account.${ this.props.showIgnored ? "hide_ignored" : "show_ignored" }`} />
 						</div> : null}
 					</section>) : null}
-				<table className="table table-hover" style={{fontSize: "0.85rem"}}>
+				<table className="table table-hover dashboard-table" style={{fontSize: "0.85rem"}}>
 					{!this.props.compact ? (
 					<thead>
 						<tr>

From 42ad6ed248bce6c89ce502a2330d85514bdc69d7 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 11:32:47 +0200
Subject: [PATCH 57/82] Fix #567: Explorer My Markets page does not load

---
 app/components/Exchange/MyMarkets.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/Exchange/MyMarkets.jsx b/app/components/Exchange/MyMarkets.jsx
index 4310c95305..430837d89a 100644
--- a/app/components/Exchange/MyMarkets.jsx
+++ b/app/components/Exchange/MyMarkets.jsx
@@ -310,10 +310,12 @@ class MyMarkets extends React.Component {
             window.addEventListener("resize", this._setMinWidth, {capture: false, passive: true});
         }
 
-        const currentBase = this.props.current.split("_")[1];
-        const currentIndex = this.props.preferredBases.findIndex(a => a === currentBase);
-        if (currentIndex !== -1 && currentIndex !== this.state.activeMarketTab) {
-            this.setState({activeMarketTab: currentIndex});
+        if (this.props.currrent) {
+            const currentBase = this.props.current.split("_")[1];
+            const currentIndex = this.props.preferredBases.findIndex(a => a === currentBase);
+            if (currentIndex !== -1 && currentIndex !== this.state.activeMarketTab) {
+                this.setState({activeMarketTab: currentIndex});
+            }
         }
     }
 

From 25a6388317340989160563e32b43d9229c8bffa0 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 12:09:50 +0200
Subject: [PATCH 58/82] Fix #500: Set testnet/mainnet faucets depending on
 current API node

---
 app/components/Settings/AccessSettings.jsx |  5 ----
 app/stores/SettingsStore.js                | 34 ++++++++++++++++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/components/Settings/AccessSettings.jsx b/app/components/Settings/AccessSettings.jsx
index 9e963f178e..e116238253 100644
--- a/app/components/Settings/AccessSettings.jsx
+++ b/app/components/Settings/AccessSettings.jsx
@@ -29,11 +29,6 @@ class ApiNode extends React.Component {
 
     activate(){
         SettingsActions.changeSetting({setting: "apiServer", value: this.props.url });
-        if (this.props.url.indexOf("testnet") !== -1) {
-            SettingsActions.changeSetting({setting: "faucet_address", value: settingsAPIs.TESTNET_FAUCET });
-        } else {
-            SettingsActions.changeSetting({setting: "faucet_address", value: settingsAPIs.DEFAULT_FAUCET });
-        };
         setTimeout(function(){
             willTransitionTo(this.props.router, this.props.router.replace, ()=>{}, false);
         }.bind(this), 50);
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index 6503da4c7e..ea849ea3fd 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -139,6 +139,9 @@ class SettingsStore {
         this.hiddenAssets = Immutable.List(ss.get("hiddenAssets", []));
 
         this.apiLatencies = ss.get("apiLatencies", {});
+
+        this.mainnet_faucet = ss.get("mainnet_faucet", settingsAPIs.DEFAULT_FAUCET);
+        this.testnet_faucet = ss.get("testnet_faucet", settingsAPIs.TESTNET_FAUCET);
     }
 
     init() {
@@ -211,10 +214,35 @@ class SettingsStore {
             payload.value
         );
 
-        ss.set("settings_v3", this.settings.toJS());
-        if (payload.setting === "walletLockTimeout") {
-            ss.set("lockTimeout", payload.value);
+        switch(payload.setting) {
+            case "faucet_address":
+                if (payload.value.indexOf("testnet") === -1) {
+                    this.mainnet_faucet = payload.value;
+                    ss.set("mainnet_faucet", payload.value);
+                } else {
+                    this.testnet_faucet = payload.value;
+                    ss.set("testnet_faucet", payload.value);
+                }
+                break;
+
+            case "apiServer":
+                let faucetUrl = payload.value.indexOf("testnet") !== -1 ?
+                    this.testnet_faucet : this.mainnet_faucet;
+                this.settings = this.settings.set(
+                    "faucet_address",
+                    faucetUrl
+                );
+                break;
+
+            case "walletLockTimeout":
+                ss.set("lockTimeout", payload.value);
+                break;
+
+            default:
+                break;
         }
+
+        ss.set("settings_v3", this.settings.toJS());
     }
 
     onChangeViewSetting(payload) {

From 49d3a8d80291a216dd0c17002a859469040b3f10 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 15:59:17 +0200
Subject: [PATCH 59/82] Fix 501: Asset explorer table alignment

---
 app/components/Blockchain/Asset.jsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/components/Blockchain/Asset.jsx b/app/components/Blockchain/Asset.jsx
index 28500b4094..899251c69b 100644
--- a/app/components/Blockchain/Asset.jsx
+++ b/app/components/Blockchain/Asset.jsx
@@ -436,13 +436,19 @@ class Asset extends React.Component {
         let header = (
           <thead>
             <tr>
-                <th> <Translate content="explorer.asset.price_feed_data.settlement_price"/> –
-                      {this.formattedPrice(settlement_price_header, false, true)}</th>
-                    <th> <Translate content="explorer.asset.price_feed_data.core_exchange_rate"/> –
-                     {this.formattedPrice(core_exchange_rate_header, false, true)} </th>
+                <th style={{textAlign: "left"}}> <Translate content="explorer.asset.price_feed_data.publisher"/> </th>
+                <th>
+                    <Translate content="explorer.asset.price_feed_data.settlement_price"/>
+                    <br />
+                    ({this.formattedPrice(settlement_price_header, false, true)})
+                </th>
+                <th>
+                    <Translate content="explorer.asset.price_feed_data.core_exchange_rate"/>
+                    <br />
+                    ({this.formattedPrice(core_exchange_rate_header, false, true)})
+                </th>
                 <th> <Translate content="explorer.asset.price_feed_data.maintenance_collateral_ratio"/> </th>
                 <th> <Translate content="explorer.asset.price_feed_data.maximum_short_squeeze_ratio"/> </th>
-                <th> <Translate content="explorer.asset.price_feed_data.publisher"/> </th>
                 <th> <Translate content="explorer.asset.price_feed_data.published"/> </th>
             </tr>
             </thead>
@@ -457,12 +463,12 @@ class Asset extends React.Component {
             var maximum_short_squeeze_ratio = '' + feed[1][1].maximum_short_squeeze_ratio/10 + '%';
             rows.push(
                 <tr key={publisher}>
-                    <td>{this.formattedPrice(settlement_price, true)}</td>
-                    <td> {this.formattedPrice(core_exchange_rate, true)} </td>
-                    <td style={{textAlign:"center"}}> {maintenance_collateral_ratio}</td>
-                    <td style={{textAlign:"center"}}> {maximum_short_squeeze_ratio}</td>
                     <td> <LinkToAccountById account={publisher}/> </td>
-                    <td><TimeAgo time={publishDate}/></td>
+                    <td style={{textAlign: "right"}}>{this.formattedPrice(settlement_price, true)}</td>
+                    <td style={{textAlign: "right"}}> {this.formattedPrice(core_exchange_rate, true)} </td>
+                    <td style={{textAlign:"right"}}> {maintenance_collateral_ratio}</td>
+                    <td style={{textAlign:"right"}}> {maximum_short_squeeze_ratio}</td>
+                    <td style={{textAlign: "right"}}><TimeAgo time={publishDate}/></td>
                 </tr>
             );
         }

From 6dbe158df1ef22db9b13c07a7385ddcef32943b6 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 17:28:55 +0200
Subject: [PATCH 60/82] Close #488: Hover state + click toggle for account name
 QR code

---
 app/assets/locales/locale-en.json             |   2 +
 .../stylesheets/components/_account.scss      | 153 +++++----
 .../stylesheets/themes/_theme-template.scss   |  10 +-
 app/components/Account/AccountInfo.jsx        |  42 ++-
 app/components/Account/AccountLeftPanel.jsx   | 290 ++++++++++--------
 app/components/Account/AccountPage.jsx        |   2 +-
 6 files changed, 296 insertions(+), 203 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 0e85293b49..ffbc608593 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -338,6 +338,8 @@
     "unfollow": "Unfollow",
     "follow": "Follow",
     "pay": "Send to",
+    "deposit": "Deposit BTS",
+    "deposit_address": "Your deposit address is your account name",
     "overview": "Overview",
     "home": "Home",
     "bts_market": "Market",
diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index 696f321d7a..a4c40bb610 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -2,18 +2,23 @@
     > div.grid-block {
         border-right: 1px solid $border-color;
     }
-  .account-buttons-row .button {
-    min-width: 4.5rem;
-  }
-  .bottom {
-    border-top: 1px solid transparent;
-    padding: 0.5rem;
-    > .center {
-      width: auto;
-      margin: 0 auto;
+    .account-buttons-row .button {
+        min-width: 4.5rem;
+    }
+    .bottom {
+        border-top: 1px solid transparent;
+        padding: 0.5rem;
+        > .center {
+            width: auto;
+            margin: 0 auto;
+        }
     }
-  }
 
+    span.button {
+        font-size: 1.1rem;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
 
     a.pay-button {
         font-weight: bold;
@@ -25,83 +30,109 @@
     }
 }
 
+@keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  animation-name: flash;
+}
+
 .account-info {
+    text-align: center;
     .account-title {
+        transition: opacity 0.75s linear, transform 0.75s linear, color 0.5s linear;
         margin-bottom: 0;
+        font-weight: 600;
+        &.flash {
+            opacity: 0.35;
+            transform: scale(1.1);
+        }
+    }
+    > p:first-of-type {
+        font-size: 85%;
+        line-height: 1.2;
     }
 
-  .account-image {
-      padding-bottom: 1rem;
-      > canvas {
-          padding: 1rem;
-          border: 1px solid $border-color;
-      }
-  }
-  > div.secondary {
-      padding-bottom: 1rem;
-      position: relative;
-
-      > span:first-of-type {
-          font-weight: bold;
-      }
-
-      > span.my-account-label {
-          top: 4px;
-          font-size: 0.8rem;
-          position: absolute;
-          right: 0;
-          text-transform: uppercase;
-          font-variant: small-caps;
-      }
-  }
+    .account-image {
+
+        padding-bottom: 1rem;
+        > canvas {
+            padding: 1rem;
+            border: 1px solid $border-color;
+        }
+    }
+    > div.secondary {
+        padding-bottom: 1rem;
+        position: relative;
+
+        > span:first-of-type {
+            font-weight: bold;
+        }
+
+        > span.my-account-label {
+            top: 4px;
+            font-size: 0.8rem;
+            position: absolute;
+            right: 0;
+            text-transform: uppercase;
+            font-variant: small-caps;
+        }
+    }
 }
 
 .account-left-menu {
-  > li {
-    &.menu-subheader {
-      text-transform: uppercase;
-      font-size: 0.9rem;
-      padding: 1.5rem 0.5rem 0.25rem 0.5rem;
-      text-align: center;
-      border-bottom: none !important;
+    > li {
+        &.menu-subheader {
+            text-transform: uppercase;
+            font-size: 0.9rem;
+            padding: 1.5rem 0.5rem 0.25rem 0.5rem;
+            text-align: center;
+            border-bottom: none !important;
 
-      > span {
-          display: inline-block;
-          color: inherit;
-          cursor: pointer;
-      }
-    }
+            > span {
+                display: inline-block;
+                color: inherit;
+                cursor: pointer;
+            }
+        }
 
-    > a {
-      padding-left: 1.75rem !important;
-      border-right: 3px solid transparent;
+        > a {
+            padding-left: 1.75rem !important;
+            border-right: 3px solid transparent;
+        }
     }
-  }
 }
 
 .no-amount {
-  padding-right: 1rem;
-  padding-left: 0.7rem;
-  font-size: 0.9rem;
-  font-weight: bold;
+    padding-right: 1rem;
+    padding-left: 0.7rem;
+    font-size: 0.9rem;
+    font-weight: bold;
 }
 
 .weight-input {
-  display: table-cell;
-  margin: 0 1rem !important;
-  width: 30% !important;
+    display: table-cell;
+    margin: 0 1rem !important;
+    width: 30% !important;
 }
 
 .threshold input {
-  width: 5rem !important;
+    width: 5rem !important;
 }
 
 .more-button {
-  padding-top: 0.5rem;
+    padding-top: 0.5rem;
 }
 
 .create-account-header {
-  height: 180px;
+    height: 180px;
 }
 
 a.action-button > span {
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index 914cd86653..b63be9f337 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -600,6 +600,14 @@
 
   .account-info {
       color: $primary-text-color;
+      > p:first-of-type {
+          color: $light-text-color;
+      }
+      .account-title {
+          &.flash {
+              color: white;
+          }
+      }
       > div.secondary {
           > span:first-of-type {
               color: $primary-text-color;
@@ -611,7 +619,7 @@
       }
   }
 
-  .my-account h5, .my-account h4, table.table > tbody > tr > td.my-account > span {
+  .my-account h5, .my-account h4, .my-account p, table.table > tbody > tr > td.my-account > span {
     font-weight: bold;
     color: $info-color;
   }
diff --git a/app/components/Account/AccountInfo.jsx b/app/components/Account/AccountInfo.jsx
index a868d236d0..f5ce77550a 100644
--- a/app/components/Account/AccountInfo.jsx
+++ b/app/components/Account/AccountInfo.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import AccountImage from "./AccountImage";
-import Utils from "common/utils.js";
 import ChainTypes from "../Utility/ChainTypes";
 import BindToChainState from "../Utility/BindToChainState";
 import Translate from "react-translate-component";
+import QRCode from "qrcode.react";
 
 class AccountInfo extends React.Component {
 
@@ -16,24 +16,50 @@ class AccountInfo extends React.Component {
 
     static defaultProps = {
         title: null,
-        image_size: {height: 120, width: 120}
+        image_size: {height: 120, width: 120},
+        showQR: false,
+        titleClass: "account-title"
+    }
+
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false
+        };
     }
 
     render() {
         let {account, image_size} = this.props;
-        let display_id = Utils.get_object_id(account.get("id"));
 
         let isLTM = account.get("lifetime_referrer_name") === account.get("name");
 
+        let QR = <div className="account-image"><QRCode size={image_size.width} value={account.get("name")}/></div>;
+
+        let qrState = !this.state.hover ? this.props.showQR : !this.props.showQR;
+
         return (
-            <div className={"account-info" + (this.props.my_account ? " my-account" : "")}>
+            <div style={{maxWidth: image_size.width}} className={"account-info" + (this.props.my_account ? " my-account" : "")}>
                 {this.props.title ? <h4>{this.props.title}</h4> : null}
-                <AccountImage size={image_size} account={account.get("name")} custom_image={null}/>
-                <h4 className="account-title"><span className={isLTM ? "lifetime" : ""}>{account.get("name")}</span></h4>
-                <div className="secondary">
+                <div
+                    onMouseEnter={() => {this.setState({hover: true});}}
+                    onMouseLeave={() => {this.setState({hover: false});}}
+                    className="clickable"
+                    onClick={() => {
+                        this.setState({hover: false});
+                        this.props.toggleQR(!this.props.showQR);
+                    }}
+                >
+                    {qrState ?
+                        QR :
+                        <AccountImage size={image_size} account={account.get("name")} custom_image={null}/>}
+                </div>
+                <p><Translate content="account.deposit_address" />!</p>
+                <p className={this.props.titleClass}><span className={isLTM ? "lifetime" : ""}>{account.get("name")}</span></p>
+                {/* <div className="secondary">
                     <span className="subheader">#{display_id}</span>
                     {this.props.my_account ? <span className="my-account-label"><Translate content="account.mine" /></span> : null}
-                </div>
+                </div> */}
             </div>
         );
     }
diff --git a/app/components/Account/AccountLeftPanel.jsx b/app/components/Account/AccountLeftPanel.jsx
index b12e817f25..fcffcfd103 100644
--- a/app/components/Account/AccountLeftPanel.jsx
+++ b/app/components/Account/AccountLeftPanel.jsx
@@ -1,9 +1,7 @@
 import React from "react";
 import {PropTypes} from "react";
 import {Link} from "react-router/es";
-import counterpart from "counterpart";
 import ReactTooltip from "react-tooltip";
-import Icon from "../Icon/Icon";
 import AccountInfo from "./AccountInfo";
 import Translate from "react-translate-component";
 import AccountActions from "actions/AccountActions";
@@ -11,136 +9,164 @@ import SettingsActions from "actions/SettingsActions";
 
 class AccountLeftPanel extends React.Component {
 
-	static propTypes = {
-		account: React.PropTypes.object.isRequired,
-		linkedAccounts: PropTypes.object,
-	};
-
-	constructor(props) {
-		super(props);
-		this.last_path = null;
-
-		this.state = {
-			showAdvanced: props.viewSettings.get("showAdvanced", false)
-		};
-	}
-
-	shouldComponentUpdate(nextProps, nextState) {
-		const changed = this.last_path !== window.location.hash;
-		this.last_path = window.location.hash;
-		return (
-			changed ||
-			this.props.account !== nextProps.account ||
-			this.props.linkedAccounts !== nextProps.linkedAccounts ||
-			nextState.showAdvanced !== this.state.showAdvanced
-		);
-	}
-
-	componentWillUnmount() {
-		ReactTooltip.hide();
-	}
-
-	onLinkAccount(e) {
-		e.preventDefault();
-		AccountActions.linkAccount(this.props.account.get("name"));
-	}
-
-	onUnlinkAccount(e) {
-		e.preventDefault();
-		AccountActions.unlinkAccount(this.props.account.get("name"));
-	}
-
-	_toggleAdvanced(e) {
-		e.preventDefault();
-		let newState = !this.state.showAdvanced;
-		this.setState({
-			showAdvanced: newState
-		});
-
-		SettingsActions.changeViewSetting({showAdvanced: newState});
-	}
-
-	render() {
-		let {account, linkedAccounts, isMyAccount} = this.props;
-		let account_name = account.get("name");
-		let linkBtn = null;
-
-		linkBtn = isMyAccount ? null : linkedAccounts.has(account_name) ?
-			<a style={{marginBottom: "1rem", marginRight: 0}} href className="button outline block-button" onClick={this.onUnlinkAccount.bind(this)}><Translate
-				content="account.unfollow"/></a> :
-			<a style={{marginBottom: "1rem", marginRight: 0}} href className="button outline block-button" onClick={this.onLinkAccount.bind(this)}><Translate
-				content="account.follow"/></a>;
-
-		let settings = counterpart.translate("header.settings");
-
-		let caret = this.state.showAdvanced ? <span>&#9660;</span> : <span>&#9650;</span>;
-
-		return (
-			<div className="grid-block vertical account-left-panel no-padding no-overflow">
-				<div className="grid-block">
-					<div className="grid-content no-padding" style={{overflowX: "hidden"}}>
-
-						<div className="regular-padding">
-							<AccountInfo account={account.get("id")} image_size={{height: 140, width: 140}} my_account={isMyAccount}/>
-							<div className="grid-container no-margin">
-								{ linkBtn }
-								<Link className="pay-button button small block-button" to={`/transfer/?to=${account_name}`}><Translate content="account.pay"/></Link>
-							</div>
-						</div>
-						<section className="block-list">
-							<ul className="account-left-menu" style={{marginBottom: 0}}>
-								<li><Link to={`/account/${account_name}/dashboard/`} activeClassName="active"><Translate content="header.dashboard"/></Link></li>
-								<li><Link to={`/account/${account_name}/member-stats/`} activeClassName="active"><Translate content="account.member.stats"/></Link></li>
-								{/* <li><Link to={`/account/${account_name}/orders/`} activeClassName="active"><Translate content="account.open_orders"/></Link></li> */}
-								<li><Link to={`/account/${account_name}/voting/`} activeClassName="active"><Translate content="account.voting"/></Link></li>
-
-								{/* <li className="menu-subheader" >
-									<span className="button outline small">
-										<Translate content="account.user_issued_assets.advanced" />
-
-									</span>
-								</li> */}
-							</ul>
-						</section>
-
-						{/* Advanced features*/}
-						<div style={{paddingBottom: 10, paddingTop: 20}}>
-							<div className="grid-container no-margin advanced-toggle">
-								<a
-									onClick={this._toggleAdvanced.bind(this)}
-									className="button outline small block-button"
-									style={{
-										border: "none",
-										textAlign: "left",
-										paddingLeft: "1.75rem"
-									}}
-								>
-									<Translate content="account.user_issued_assets.advanced" />
-									<span>  {caret}</span>
-								</a>
-							</div>
-						</div>
-						<section className="block-list">
-							{this.state.showAdvanced ? (<ul className="account-left-menu">
-								<li><Link to={`/account/${account_name}/assets/`} activeClassName="active"><Translate content="account.user_issued_assets.issued_assets"/></Link></li>
-								<li><Link to={`/account/${account_name}/permissions/`} activeClassName="active"><Translate content="account.permissions"/></Link></li>
-								<li><Link to={`/account/${account_name}/whitelist/`} activeClassName="active"><Translate content="account.whitelist.title"/></Link></li>
-								{isMyAccount ? <li><Link to={`/account/${account_name}/vesting/`} activeClassName="active"><Translate content="account.vesting.title"/></Link></li> : null}
-							</ul>) : null}
-						</section>
-
-						{isMyAccount ?
-							<div className="regular-padding">
-								<div className="button block-button create-account-button">
-									<Link to={`/create-account/${this.props.passwordLogin ? "password" : "wallet"}`}><Translate content="account.create_new" /></Link>
-								</div>
-						</div>
-						: null}
-					</div>
-				</div>
-			</div>
-		);
-	}
+    static propTypes = {
+        account: React.PropTypes.object.isRequired,
+        linkedAccounts: PropTypes.object,
+    };
+
+    constructor(props) {
+        super(props);
+        this.last_path = null;
+
+        this.state = {
+            showAdvanced: props.viewSettings.get("showAdvanced", false),
+            showQR: props.viewSettings.get("showDepositQR", false)
+        };
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        const changed = this.last_path !== window.location.hash;
+        this.last_path = window.location.hash;
+        return (
+            changed ||
+            this.props.account !== nextProps.account ||
+            this.props.linkedAccounts !== nextProps.linkedAccounts ||
+            nextState.showAdvanced !== this.state.showAdvanced ||
+            nextState.showQR !== this.state.showQR ||
+            nextState.titleClass !== this.state.titleClass
+        );
+    }
+
+    componentWillUnmount() {
+        ReactTooltip.hide();
+    }
+
+    onLinkAccount(e) {
+        e.preventDefault();
+        AccountActions.linkAccount(this.props.account.get("name"));
+    }
+
+    onUnlinkAccount(e) {
+        e.preventDefault();
+        AccountActions.unlinkAccount(this.props.account.get("name"));
+    }
+
+    _toggleAdvanced(e) {
+        e.preventDefault();
+        let newState = !this.state.showAdvanced;
+        this.setState({
+            showAdvanced: newState
+        });
+
+        SettingsActions.changeViewSetting({showAdvanced: newState});
+    }
+
+    _toggleQR(value) {
+        this.setState({
+            showQR: value
+        });
+        SettingsActions.changeViewSetting({showDepositQR: value});
+    }
+
+    _depositClick() {
+        this._toggleQR(true);
+        this.setState({titleClass: "account-title flash"});
+        setTimeout(() => {
+            this.setState({titleClass: undefined});
+        }, 750);
+    }
+
+    render() {
+        let {account, linkedAccounts, isMyAccount} = this.props;
+        let account_name = account.get("name");
+        let linkBtn = null;
+
+        linkBtn = isMyAccount ? null : linkedAccounts.has(account_name) ?
+        <span className="button block-button" onClick={this.onUnlinkAccount.bind(this)}><Translate
+            content="account.unfollow"/>
+        </span> :
+        <span className="button block-button" onClick={this.onLinkAccount.bind(this)}>
+            <Translate content="account.follow"/>
+        </span>;
+
+        let caret = this.state.showAdvanced ? <span>&#9660;</span> : <span>&#9650;</span>;
+
+        const imageSize = {height: 150, width: 150};
+
+        return (
+            <div className="grid-block vertical account-left-panel no-padding no-overflow">
+                <div className="grid-block">
+                    <div className="grid-content no-padding" style={{overflowX: "hidden"}}>
+
+                        <div className="regular-padding">
+                            <AccountInfo
+                                account={account.get("id")}
+                                image_size={imageSize}
+                                my_account={isMyAccount}
+                                showQR={this.state.showQR}
+                                toggleQR={this._toggleQR.bind(this)}
+                                titleClass={this.state.titleClass}
+                            />
+                            <div className="grid-container no-margin" style={{paddingTop: 20, maxWidth: imageSize.width}}>
+                                <div onClick={this._depositClick.bind(this)} style={{paddingBottom: 15}}><Translate className="button block-button no-margin" content="account.deposit"/></div>
+                                <div style={{paddingBottom: 15}}><Link to={`/transfer/?to=${account_name}`}><Translate className="button block-button no-margin" content="account.pay"/></Link></div>
+                                { linkBtn }
+                            </div>
+                        </div>
+                        <section className="block-list">
+                            <ul className="account-left-menu" style={{marginBottom: 0}}>
+                                <li><Link to={`/account/${account_name}/dashboard/`} activeClassName="active"><Translate content="header.dashboard"/></Link></li>
+                                <li><Link to={`/account/${account_name}/member-stats/`} activeClassName="active"><Translate content="account.member.stats"/></Link></li>
+                                {/* <li><Link to={`/account/${account_name}/orders/`} activeClassName="active"><Translate content="account.open_orders"/></Link></li> */}
+                                <li><Link to={`/account/${account_name}/voting/`} activeClassName="active"><Translate content="account.voting"/></Link></li>
+
+                                {/* <li className="menu-subheader" >
+                                <span className="button outline small">
+                                <Translate content="account.user_issued_assets.advanced" />
+
+                            </span>
+                        </li> */}
+                    </ul>
+                </section>
+
+                {/* Advanced features*/}
+                <div style={{paddingBottom: 10, paddingTop: 20}}>
+                    <div className="grid-container no-margin advanced-toggle">
+                        <a
+                            onClick={this._toggleAdvanced.bind(this)}
+                            className="button outline small block-button"
+                            style={{
+                                border: "none",
+                                textAlign: "left",
+                                paddingLeft: "1.75rem"
+                            }}
+                            >
+                                <Translate content="account.user_issued_assets.advanced" />
+                                <span>  {caret}</span>
+                            </a>
+                        </div>
+                    </div>
+                    <section className="block-list">
+                        {this.state.showAdvanced ? (<ul className="account-left-menu">
+                            <li><Link to={`/account/${account_name}/assets/`} activeClassName="active"><Translate content="account.user_issued_assets.issued_assets"/></Link></li>
+                            <li><Link to={`/account/${account_name}/permissions/`} activeClassName="active"><Translate content="account.permissions"/></Link></li>
+                            <li><Link to={`/account/${account_name}/whitelist/`} activeClassName="active"><Translate content="account.whitelist.title"/></Link></li>
+                            {isMyAccount ? <li><Link to={`/account/${account_name}/vesting/`} activeClassName="active"><Translate content="account.vesting.title"/></Link></li> : null}
+                        </ul>) : null}
+                    </section>
+
+                    {isMyAccount ?
+                        <div className="regular-padding">
+                            <div className="button block-button create-account-button">
+                                <Link to={`/create-account/${this.props.passwordLogin ? "password" : "wallet"}`}><Translate content="account.create_new" /></Link>
+                            </div>
+                        </div>
+                        : null}
+                    </div>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default AccountLeftPanel;
diff --git a/app/components/Account/AccountPage.jsx b/app/components/Account/AccountPage.jsx
index 0b0ab5e38f..ccf954f38c 100644
--- a/app/components/Account/AccountPage.jsx
+++ b/app/components/Account/AccountPage.jsx
@@ -36,7 +36,7 @@ class AccountPage extends React.Component {
 
         return (
             <div className="grid-block page-layout">
-                <div className="show-for-medium grid-block shrink left-column no-padding" style={{minWidth: 250}}>
+                <div className="show-for-medium grid-block shrink left-column no-padding" style={{minWidth: 200}}>
                     <AccountLeftPanel
                         account={account}
                         isMyAccount={isMyAccount}

From 89f47a9086585d2186874ca0481833d0b75261df Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 20:58:55 +0200
Subject: [PATCH 61/82] Increase flash animation speed #488

---
 app/assets/stylesheets/components/_account.scss | 2 +-
 app/components/Account/AccountLeftPanel.jsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_account.scss b/app/assets/stylesheets/components/_account.scss
index a4c40bb610..8edc678931 100755
--- a/app/assets/stylesheets/components/_account.scss
+++ b/app/assets/stylesheets/components/_account.scss
@@ -47,7 +47,7 @@
 .account-info {
     text-align: center;
     .account-title {
-        transition: opacity 0.75s linear, transform 0.75s linear, color 0.5s linear;
+        transition: opacity 0.25s linear, transform 0.25s linear, color 0.25s linear;
         margin-bottom: 0;
         font-weight: 600;
         &.flash {
diff --git a/app/components/Account/AccountLeftPanel.jsx b/app/components/Account/AccountLeftPanel.jsx
index fcffcfd103..24c383f067 100644
--- a/app/components/Account/AccountLeftPanel.jsx
+++ b/app/components/Account/AccountLeftPanel.jsx
@@ -73,7 +73,7 @@ class AccountLeftPanel extends React.Component {
         this.setState({titleClass: "account-title flash"});
         setTimeout(() => {
             this.setState({titleClass: undefined});
-        }, 750);
+        }, 250);
     }
 
     render() {

From 5f51a149aa062cef3b3d8ac6402d2c7132c096a5 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Thu, 12 Oct 2017 21:44:18 +0200
Subject: [PATCH 62/82] Fix #573: Stars broken in new tables

---
 app/assets/stylesheets/components/_exchange.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_exchange.scss b/app/assets/stylesheets/components/_exchange.scss
index b0e0a92fa4..eb0ecf0604 100644
--- a/app/assets/stylesheets/components/_exchange.scss
+++ b/app/assets/stylesheets/components/_exchange.scss
@@ -438,11 +438,11 @@ table thead tr th.mymarkets-header {
 }
 
 .gold-star > svg > path {
-  fill: #CC9F00;
+  fill: #CC9F00 !important;
 }
 
 .grey-star > svg > path {
-  fill: #878787;
+  fill: #878787 !important;
 }
 
 .shuffle > svg > path {

From beda7494a4ed8936dde393ec53d32179f5b874a4 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 09:16:22 +0200
Subject: [PATCH 63/82] Filter out insecure websocket urls when using https

---
 app/routerTransition.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/routerTransition.js b/app/routerTransition.js
index 32204bcc8e..ae6626b87e 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -36,6 +36,10 @@ const filterAndSortURLs = (count, latencies) => {
         if (!__TESTNET__ && a.url.indexOf("testnet") !== -1) return false;
         /* Also remove the automatic fallback dummy url */
         if (a.url.indexOf("fake.automatic-selection") !== -1) return false;
+        /* Remove insecure websocket urls when using secure protocol */
+        if (window.location.protocol === "https:" && a.url.indexOf("ws://") !== -1) {
+            return false;
+        }
         /* Use all the remaining urls if count = 0 */
         if (!count) return true;
 
@@ -48,6 +52,8 @@ const filterAndSortURLs = (count, latencies) => {
     return urls;
 };
 
+
+
 const willTransitionTo = (nextState, replaceState, callback, appInit=true) => { //appInit is true when called via router onEnter, and false when node is manually selected in access settings
     const apiLatencies = SettingsStore.getState().apiLatencies;
     let apiLatenciesCount = Object.keys(apiLatencies).length;
@@ -67,6 +73,10 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
     */
     let connectionString = SettingsStore.getSetting("apiServer");
     if (!connectionString) connectionString = urls[0].url;
+    /* Don't use an insecure websocket url when using secure protocol */
+    if (window.location.protocol === "https:" && connectionString.indexOf("ws://") !== -1) {
+        connectionString = urls[0];
+    }
     const autoSelection = connectionString.indexOf("fake.automatic-selection") !== -1;
     if (autoSelection) {
         connectionString = urls[0];

From 6e098b6b3043220d990183544530a6241ca91631 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 09:38:27 +0200
Subject: [PATCH 64/82] Set cloud wallet login to default, improve settings
 switching logic

---
 app/assets/locales/locale-en.json         |  4 +++-
 app/components/Settings/Settings.jsx      | 20 +++++++++++---------
 app/components/Settings/SettingsEntry.jsx |  4 ++--
 app/stores/SettingsStore.js               |  6 +++---
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index ffbc608593..f2151c04ab 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -796,7 +796,9 @@
     }
   },
   "settings": {
-    "passwordLogin": "Login using a cloud wallet",
+    "passwordLogin": "Login mode",
+    "cloud_login": "Cloud Wallet Login",
+    "local_wallet": "Local Wallet Login",
     "inverseMarket": "Market orientation preference",
     "unit": "Preferred unit of account",
     "confirmMarketOrder": "Ask for confirmation of market orders",
diff --git a/app/components/Settings/Settings.jsx b/app/components/Settings/Settings.jsx
index e183468b08..e14c16c5ab 100644
--- a/app/components/Settings/Settings.jsx
+++ b/app/components/Settings/Settings.jsx
@@ -39,16 +39,17 @@ class Settings extends React.Component {
         if (np.settings.get("passwordLogin") !== this.props.settings.get("passwordLogin")) {
             const currentEntries = this._getMenuEntries(this.props);
             const menuEntries = this._getMenuEntries(np);
-            if (currentEntries.length < menuEntries.length) {
-                this.setState({
-                    activeSetting: this.state.activeSetting + (menuEntries.length - currentEntries.length)
-                });
-            }
+            const currentActive = currentEntries[this.state.activeSetting];
+            const newActiveIndex = menuEntries.indexOf(currentActive);
+            const newActive = menuEntries[newActiveIndex];
             this.setState({
                 menuEntries
             });
-
-            if (this.state.activeSetting > (menuEntries.length - 1)) {
+            if (newActiveIndex && newActiveIndex !== this.state.activeSetting) {
+                this.setState({
+                    activeSetting: menuEntries.indexOf(currentActive)
+                });
+            } else if (!newActive || this.state.activeSetting > (menuEntries.length - 1)) {
                 this.setState({
                     activeSetting: 0
                 });
@@ -139,7 +140,9 @@ class Settings extends React.Component {
         case "showSettles":
         case "showAssetPercent":
         case "passwordLogin":
-            SettingsActions.changeSetting({setting, value: e.target.value === "yes" });
+            let reference = defaults[setting][0];
+            if (reference.translate) reference = reference.translate;
+            SettingsActions.changeSetting({setting, value: e.target.value === reference });
             break;
 
         case "unit":
@@ -174,7 +177,6 @@ class Settings extends React.Component {
     render() {
         let {settings, defaults} = this.props;
         const {menuEntries, activeSetting, settingEntries} = this.state;
-
         let entries;
         let activeEntry = menuEntries[activeSetting] || menuEntries[0];
         switch (activeEntry) {
diff --git a/app/components/Settings/SettingsEntry.jsx b/app/components/Settings/SettingsEntry.jsx
index 51195a3d98..3bed56a9a5 100644
--- a/app/components/Settings/SettingsEntry.jsx
+++ b/app/components/Settings/SettingsEntry.jsx
@@ -28,7 +28,7 @@ export default class SettingsEntry extends React.Component {
     }
 
     render() {
-        let {defaults, setting, settings, apiServer} = this.props;
+        let {defaults, setting, settings} = this.props;
         let options, optional, confirmButton, value, input, selected = settings.get(setting);
         let noHeader = false;
 
@@ -97,7 +97,7 @@ export default class SettingsEntry extends React.Component {
 
 
                 if (defaults) {
-                    options = defaults.map((entry, index) => {
+                    options = defaults.map((entry) => {
                         let option = entry.translate ? counterpart.translate(`settings.${entry.translate}`) : entry;
                         if (setting === "unit") {
                             option = <AssetName name={entry} />;
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index ea849ea3fd..50cf89baa8 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -42,7 +42,7 @@ class SettingsStore {
             walletLockTimeout: 60 * 10,
             themes: "darkTheme",
             disableChat: false,
-            passwordLogin: false
+            passwordLogin: true
         });
 
         // If you want a default value to be translated, add the translation to settings in locale-xx.js
@@ -88,8 +88,8 @@ class SettingsStore {
                 "olDarkTheme"
             ],
             passwordLogin: [
-                {translate: "yes"},
-                {translate: "no"}
+                {translate: "cloud_login"},
+                {translate: "local_wallet"}
             ]
             // confirmMarketOrder: [
             //     {translate: "confirm_yes"},

From ec267b7a10aa1421a1e1f84c4663c7ef88894e0b Mon Sep 17 00:00:00 2001
From: Calvin Froedge <calvinfroedge@gmail.com>
Date: Fri, 13 Oct 2017 02:43:12 -0500
Subject: [PATCH 65/82] Make sure exchange input only allows numbers, does not
 allow negative values, only allows a single decimal, cannot be changed with
 mouse wheel (#572)

---
 app/components/Exchange/ExchangeInput.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/Exchange/ExchangeInput.jsx b/app/components/Exchange/ExchangeInput.jsx
index 49834cc7ff..16a5c1808d 100644
--- a/app/components/Exchange/ExchangeInput.jsx
+++ b/app/components/Exchange/ExchangeInput.jsx
@@ -6,6 +6,7 @@ export class DecimalChecker extends React.Component {
         var decimal = nextValue.match(/\./g);
         var decimalCount = decimal ? decimal.length : 0;
         if(e.key === "." && decimalCount > 1) e.preventDefault();
+        if(parseFloat(nextValue) != nextValue) e.preventDefault();
 
         if(this.props.onKeyPress) this.props.onKeyPress(e);
     }
@@ -17,7 +18,7 @@ class ExchangeInput extends DecimalChecker {
     }
 
     render(){
-        return <input type="number" {...this.props} onKeyPress={this.onKeyPress.bind(this)} />;
+        return <input type="text" {...this.props} onKeyPress={this.onKeyPress.bind(this)} />;
     }
 }
 

From 89eee9d908163e16d5524a56d38aa6db9bb5fcfb Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 09:48:51 +0200
Subject: [PATCH 66/82] Fix Backup dashboard link

---
 app/components/Wallet/Backup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Wallet/Backup.jsx b/app/components/Wallet/Backup.jsx
index 651f55b3c9..f5bb79b6f0 100644
--- a/app/components/Wallet/Backup.jsx
+++ b/app/components/Wallet/Backup.jsx
@@ -112,7 +112,7 @@ class Restore extends Component {
         if(has_new_wallet)
             return <span>
                 <h5><Translate content="wallet.restore_success" name={new_wallet.toUpperCase()} /></h5>
-                <Link to="dashboard">
+                <Link to="/dashboard">
                     <div className="button outline">
                         <Translate component="span" content="header.dashboard" />
                     </div>

From 84331a614eab968f55b02f94a17098dce263da02 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 09:49:09 +0200
Subject: [PATCH 67/82] Add a no-ugly script for hash history builds

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 0a32d7812f..5a24721432 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "start-electron": "electron build/electron/index.js",
     "build": "cross-env NODE_ENV=production webpack --env.prod",
     "build-hash": "cross-env NODE_ENV=production webpack --env.prod --env.hash --env.baseUrl=''",
+    "build-hash-nougly": "cross-env NODE_ENV=production webpack --env.prod --env.hash --env.noUgly --env.baseUrl=''",
     "build-github": "cross-env NODE_ENV=production webpack --env.prod --env.hash --env.baseUrl='/wallet/'",
     "build-electron": "cross-env NODE_ENV=production webpack --env.prod --env.electron --env.hash",
     "build-electron-nougly": "cross-env NODE_ENV=production webpack --env.prod --env.electron --env.noUgly --env.hash --progress --display-error-details --colors",

From 0dac394ad4e1899311f0d94932b04871a6747c29 Mon Sep 17 00:00:00 2001
From: Calvin Froedge <calvinfroedge@gmail.com>
Date: Fri, 13 Oct 2017 02:49:21 -0500
Subject: [PATCH 68/82] Reset backup store when wallet is changed (#570)

---
 app/components/Wallet/WalletManager.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/Wallet/WalletManager.jsx b/app/components/Wallet/WalletManager.jsx
index c4a17f1067..2ffc910c5f 100644
--- a/app/components/Wallet/WalletManager.jsx
+++ b/app/components/Wallet/WalletManager.jsx
@@ -2,6 +2,7 @@ import React, {Component} from "react";
 import {Link} from "react-router/es";
 import { connect } from "alt-react";
 import WalletActions from "actions/WalletActions";
+import BackupActions from "actions/BackupActions";
 import WalletManagerStore from "stores/WalletManagerStore";
 import Translate from "react-translate-component";
 import cname from "classnames";
@@ -237,6 +238,7 @@ class ChangeActiveWallet extends Component {
 
     onConfirm() {
         WalletActions.setWallet(this.state.current_wallet);
+        BackupActions.reset();
         // if (window.electron) {
         //     window.location.hash = "";
         //     window.remote.getCurrentWindow().reload();

From 7b96dfdcd0c8bf9b972072713a6ba14730263e26 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 10:05:02 +0200
Subject: [PATCH 69/82] Fix issue #294 (#575)

* Update README.md

* Issue 315 - Add Chart Clamp To Settings Dropdown (#373)

* Add Chart Clamp To Settings Dropdown

* Removed Unused Variable

Merging as is and then we'll see about handling the redraw bug in the next sprint.

* More intuitive vesting stats in UI - issue #294

* pending_vested_fees->pending_immediate_fees

* Fees terminology

I took a stab at this.

* Remove fees_pending and fees_vested text, update fee texts #294
---
 app/assets/locales/locale-cn.json            | 2 --
 app/assets/locales/locale-de.json            | 2 --
 app/assets/locales/locale-en.json            | 8 +++-----
 app/assets/locales/locale-es.json            | 2 --
 app/assets/locales/locale-fr.json            | 2 --
 app/assets/locales/locale-it.json            | 2 --
 app/assets/locales/locale-ko.json            | 2 --
 app/assets/locales/locale-ru.json            | 2 --
 app/assets/locales/locale-tr.json            | 2 --
 app/components/Account/AccountMembership.jsx | 1 -
 app/components/Account/Statistics.jsx        | 8 --------
 app/help/en/components/AccountMembership.md  | 8 ++++----
 12 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/app/assets/locales/locale-cn.json b/app/assets/locales/locale-cn.json
index e851ec2d54..b58922a5d8 100644
--- a/app/assets/locales/locale-cn.json
+++ b/app/assets/locales/locale-cn.json
@@ -91,8 +91,6 @@
       "ref_percentage": "推荐人奖励",
       "network_percentage": "网络收取",
       "fees_paid": "手续费总支出",
-      "fees_pending": "待结费用",
-      "fees_vested": "待解冻金额",
       "in_orders": "委单冻结金额 %(core_asset)s ",
       "unknown": "未知的会员",
       "lifetime": "终身会员",
diff --git a/app/assets/locales/locale-de.json b/app/assets/locales/locale-de.json
index 7e7dbcc341..4a7b8c7401 100644
--- a/app/assets/locales/locale-de.json
+++ b/app/assets/locales/locale-de.json
@@ -104,8 +104,6 @@
       "fee_allocation": "Gebührenverteilung",
       "membership": "Mitgliedschaft",
       "fees_paid": "Lifetime bazahlte Gebühren",
-      "fees_pending": "unbestätigte Gebühren",
-      "fees_vested": "Anstehnde Gebühren in Sperrfristguthaben",
       "referrals": "Empfehlungen",
       "rewards": "Belohnungen",
       "cashback": "Skonto",
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index f2151c04ab..e4afe68cc1 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -134,7 +134,7 @@
       "title": "Vesting balances",
       "balance_number": "Balance #%(id)s",
       "no_balances": "This account has no vesting balances",
-      "explain": "Vesting balances contain any fees earned through the referral program or from worker pay for example. They have a certain vesting period and are continually unlocked during that vesting period until all funds are available"
+      "explain": "Vesting balances contain any fees earned through the referral program or from worker pay, for example. They have a certain vesting period and are continually unlocked during that vesting period until all of the balances are available"
     },
     "member": {
       "stats": "Membership",
@@ -145,9 +145,7 @@
       "network_percentage": "Network",
       "fee_allocation": "Fee Allocation",
       "membership": "Membership",
-      "fees_paid": "Lifetime fees paid",
-      "fees_pending": "Pending fees",
-      "fees_vested": "Pending vested fees",
+      "fees_paid": "Total fees paid",
       "referrals": "Referrals",
       "rewards": "Cashback Rewards",
       "cashback": "Vesting balance amount",
@@ -160,7 +158,7 @@
       "subscribe": "Buy Annual Subscription",
       "expires": "expires",
       "membership_expiration": "Membership Expiration",
-      "fees_cashback": "Fees and cashback",
+      "fees_cashback": "Fee statistics",
       "coindays": "coin days",
       "earned": "Coin days earned",
       "required": "Coin days required",
diff --git a/app/assets/locales/locale-es.json b/app/assets/locales/locale-es.json
index 7e87a944e7..03a7a5d3d6 100644
--- a/app/assets/locales/locale-es.json
+++ b/app/assets/locales/locale-es.json
@@ -80,8 +80,6 @@
       "fee_allocation": "Asignación de Comisiones",
       "membership": "Membresía",
       "fees_paid": "Membresía vitalicia paga",
-      "fees_pending": "Comisiones pendientes",
-      "fees_vested": "Comisiones pendientes de consolidación",
       "referrals": "Referidos",
       "rewards": "Reembolso de Honorarios",
       "cashback": "Reembolso",
diff --git a/app/assets/locales/locale-fr.json b/app/assets/locales/locale-fr.json
index f78b1184cd..5fa7de800a 100644
--- a/app/assets/locales/locale-fr.json
+++ b/app/assets/locales/locale-fr.json
@@ -72,8 +72,6 @@
       "ref_percentage": "Pourcentage de frais pour le recruteur",
       "network_percentage": "Pourcentage de frais pour le reseau",
       "fees_paid": "Frais payé",
-      "fees_pending": "Frais en attente",
-      "fees_vested": "Frais en attente bloqué",
       "in_orders": "Total de %(core_asset)s en ordres",
       "referrals": "Recrutements",
       "rewards": "Gains totaux",
diff --git a/app/assets/locales/locale-it.json b/app/assets/locales/locale-it.json
index 18070832db..f26a4d8f59 100644
--- a/app/assets/locales/locale-it.json
+++ b/app/assets/locales/locale-it.json
@@ -141,8 +141,6 @@
       "fee_allocation": "Allocazione commissioni",
       "membership": "Membership",
       "fees_paid": "Commissioni membership a vita pagate",
-      "fees_pending": "Commissioni in sospeso",
-      "fees_vested": "Commissioni vested in sospeso",
       "referrals": "Referral",
       "rewards": "Cashback Rewards",
       "cashback": "Saldo del bilancio vesting",
diff --git a/app/assets/locales/locale-ko.json b/app/assets/locales/locale-ko.json
index dc929317db..1868edd5c7 100644
--- a/app/assets/locales/locale-ko.json
+++ b/app/assets/locales/locale-ko.json
@@ -80,8 +80,6 @@
       "fee_allocation": "수수료 분배",
       "membership": "멤버쉽",
       "fees_paid": "지불된 평생회원 수수료",
-      "fees_pending": "보류중인 수수료",
-      "fees_vested": "보류중인 확정 수수료",
       "referrals": "피추천인",
       "rewards": "캐쉬백 리워드",
       "cashback": "캐쉬백",
diff --git a/app/assets/locales/locale-ru.json b/app/assets/locales/locale-ru.json
index 1137f6d4de..f7006f16f6 100644
--- a/app/assets/locales/locale-ru.json
+++ b/app/assets/locales/locale-ru.json
@@ -138,8 +138,6 @@
       "fee_allocation":"Распределение комиссии",
       "membership":"Членство",
       "fees_paid":"Комиссии, выплаченные за время существования счета",
-      "fees_pending":"Обрабатывающиеся комиссии",
-      "fees_vested":"Комиссии, прошедшие вестинг",
       "referrals":"Рефералы",
       "rewards":"Кэшбэк Вознаграждения",
       "cashback":"Сумма вестингового остатка",
diff --git a/app/assets/locales/locale-tr.json b/app/assets/locales/locale-tr.json
index 367115883a..789b07a5ba 100644
--- a/app/assets/locales/locale-tr.json
+++ b/app/assets/locales/locale-tr.json
@@ -127,8 +127,6 @@
       "fee_allocation": "Ücret Tahsisi",
       "membership": "Üyelik",
       "fees_paid": "Ödenmiş ücretler",
-      "fees_pending": "Bekleyen ücretler",
-      "fees_vested": "Hak edilmiş ücretler",
       "referrals": "Tavsiye edenler",
       "rewards": "Nakit-İade Ödülleri",
       "cashback": "Tutulan bakiye miktarı",
diff --git a/app/components/Account/AccountMembership.jsx b/app/components/Account/AccountMembership.jsx
index 920094fd86..1fd3de0c0b 100644
--- a/app/components/Account/AccountMembership.jsx
+++ b/app/components/Account/AccountMembership.jsx
@@ -78,7 +78,6 @@ class AccountMembership extends React.Component {
         let lifetime_cost = gprops.getIn(["parameters", "current_fees", "parameters", 8, 1, "membership_lifetime_fee"]) * gprops.getIn(["parameters", "current_fees", "scale"]) / 10000;
         let annual_cost = gprops.getIn(["parameters", "current_fees", "parameters", 8, 1, "membership_annual_fee"]) * gprops.getIn(["parameters", "current_fees", "scale"]) / 10000;
 
-
         let member_status = ChainStore.getAccountMemberStatus(this.props.account);
         let membership = "account.member." + member_status;
         let expiration = null
diff --git a/app/components/Account/Statistics.jsx b/app/components/Account/Statistics.jsx
index 31190c23b8..1c37fabb1f 100644
--- a/app/components/Account/Statistics.jsx
+++ b/app/components/Account/Statistics.jsx
@@ -18,14 +18,6 @@ class Statistics extends React.Component {
                     <td><Translate content="account.member.fees_paid"/> </td>
                     <td><FormattedAsset amount={parseFloat(stat_object.lifetime_fees_paid)} asset="1.3.0" /></td>
                 </tr>
-                <tr>
-                    <td><Translate content="account.member.fees_pending"/> </td>
-                    <td><FormattedAsset amount={parseFloat(stat_object.pending_fees)} asset="1.3.0" /></td>
-                </tr>
-                <tr>
-                    <td><Translate content="account.member.fees_vested"/> </td>
-                    <td><FormattedAsset amount={parseFloat(stat_object.pending_vested_fees)} asset="1.3.0" /></td>
-                </tr>
             </tbody>
         );
     }
diff --git a/app/help/en/components/AccountMembership.md b/app/help/en/components/AccountMembership.md
index 743b38bf3b..f15101f2c1 100644
--- a/app/help/en/components/AccountMembership.md
+++ b/app/help/en/components/AccountMembership.md
@@ -13,12 +13,12 @@ The _registrar_ is the account that paid the transaction fee to register {accoun
 divide the remaining {referrerTotalFee}% between themselves and their own _Affiliate Referrer_ program.
 
 {account}'s registrar chose to share {referrerFee}% of the total fee with the _Affiliate Referrer_ and keep {registrarFee}% of the total fee for themselves.
-                            
-                            
+
+
 #### Pending Fees
-Fees paid by {account} are only divided among the network, referrers, and registrars once every maintenance interval ({maintenanceInterval} seconds). The
+Fees paid by {account} are divided among the network, referrers, and registrars once every maintenance interval ({maintenanceInterval} seconds). The
 next maintenance time is {nextMaintenanceTime}.
-                 
+
 #### Vesting Fees
 
 Most fees are made available immediately, but fees over {vestingThreshold}

From 2aaba3235e643eb9a3c1acfb5a5292d441842607 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 10:13:16 +0200
Subject: [PATCH 70/82] Fix #574: Remove nodes that are no longer available

---
 app/api/apiConfig.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/api/apiConfig.js b/app/api/apiConfig.js
index 5b9492d348..22224db34b 100644
--- a/app/api/apiConfig.js
+++ b/app/api/apiConfig.js
@@ -24,13 +24,10 @@ export const settingsAPIs = {
         {url: "wss://eu.openledger.info/ws", location: "Berlin, Germany"},
         {url: "wss://bit.btsabc.org/ws", location: "Hong Kong"},
         {url: "wss://bts.ai.la/ws", location: "Hong Kong"},
-        {url: "wss://bts.transwiser.com/ws", location: "Hangzhou, China"},
         {url: "wss://bitshares.dacplay.org/ws", location:  "Hangzhou, China"},
         {url: "wss://bitshares-api.wancloud.io/ws", location:  "China"},
         {url: "wss://openledger.hk/ws", location: "Hong Kong"},
-        {url: "wss://secure.freedomledger.com/ws", location: "Toronto, Canada"},
         {url: "wss://dexnode.net/ws", location: "Dallas, USA"},
-        {url: "wss://altcap.io/ws", location: "Paris, France"},
         {url: "wss://bitshares.crypto.fans/ws", location: "Munich, Germany"},
         {url: "wss://node.testnet.bitshares.eu", location: "Public Testnet Server (Frankfurt, Germany)"}
     ],

From 37f6013bf3e788a1693e70f5863dfb6f25d6601a Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 11:14:31 +0200
Subject: [PATCH 71/82] Fix #479: Max supply bug in asset creation and update

---
 app/assets/locales/locale-en.json             |  1 +
 app/components/Account/AccountAssetCreate.jsx | 31 +++++++++++-------
 app/components/Account/AccountAssetUpdate.jsx | 32 ++++++++++++-------
 app/lib/chain/asset_constants.js              |  3 +-
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index e4afe68cc1..e69116e763 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -183,6 +183,7 @@
       "approx_fee": "Approximate fee",
       "exists": "That asset already exists",
       "max_positive": "Max supply should be a positive number",
+      "too_large": "That max supply is too big, please choose a smaller number",
       "core_exchange_rate": "Core exchange rate",
       "quote": "Quote asset amount",
       "quote_name": "Quote asset",
diff --git a/app/components/Account/AccountAssetCreate.jsx b/app/components/Account/AccountAssetCreate.jsx
index ab4a654e4e..7483d17472 100644
--- a/app/components/Account/AccountAssetCreate.jsx
+++ b/app/components/Account/AccountAssetCreate.jsx
@@ -18,7 +18,7 @@ import AmountSelector from "../Utility/AmountSelector";
 import assetConstants from "chain/asset_constants";
 import { estimateFee } from "common/trxHelper";
 
-let MAX_SAFE_INT = new big("9007199254740991");
+let GRAPHENE_MAX_SHARE_SUPPLY = new big(assetConstants.GRAPHENE_MAX_SHARE_SUPPLY);
 
 class BitAssetOptions extends React.Component {
 
@@ -296,7 +296,7 @@ class AccountAssetCreate extends React.Component {
     }
 
     _onUpdateInput(value, e) {
-        let {update} = this.state;
+        let {update, errors} = this.state;
         let updateState = true;
         let shouldRestoreCursor = false;
         let precision = utils.get_asset_precision(this.state.update.precision);
@@ -310,8 +310,9 @@ class AccountAssetCreate extends React.Component {
                 break;
 
             case "max_market_fee":
-                if ((new big(inputValue)).times(precision).gt(MAX_SAFE_INT)) {
-                    return this.setState({errors: {max_market_fee: "The number you tried to enter is too large"}});
+                if ((new big(inputValue)).times(Math.pow(10, precision)).gt(GRAPHENE_MAX_SHARE_SUPPLY)) {
+                    errors.max_market_fee = "The number you tried to enter is too large";
+                    return this.setState({errors});
                 }
                 target.value = utils.limitByPrecision(target.value, this.state.update.precision);
                 update[value] = target.value;
@@ -323,11 +324,14 @@ class AccountAssetCreate extends React.Component {
                 break;
 
             case "max_supply":
-                if ((new big(target.value)).times(precision).gt(MAX_SAFE_INT)) {
-                    return this.setState({errors: {max_supply: "The number you tried to enter is too large"}});
-                }
                 target.value = utils.limitByPrecision(target.value, this.state.update.precision);
                 update[value] = target.value;
+                // if ((new big(target.value)).times(Math.pow(10, precision).gt(GRAPHENE_MAX_SHARE_SUPPLY)) {
+                //     return this.setState({
+                //         update,
+                //         errors: {max_supply: "The number you tried to enter is too large"
+                //     }});
+                // }
                 break;
 
             case "symbol":
@@ -360,8 +364,6 @@ class AccountAssetCreate extends React.Component {
     }
 
     _validateEditFields( new_state ) {
-        let {core} = this.props;
-
         let errors = {
             max_supply: null
         };
@@ -372,7 +374,14 @@ class AccountAssetCreate extends React.Component {
             errors.symbol = counterpart.translate("account.user_issued_assets.exists");
         }
 
-        errors.max_supply = new_state.max_supply <= 0 ? counterpart.translate("account.user_issued_assets.max_positive") : null;
+        try {
+            errors.max_supply = new_state.max_supply <= 0 ? counterpart.translate("account.user_issued_assets.max_positive") :
+                (new big(new_state.max_supply)).times(Math.pow(10, new_state.precision)).gt(GRAPHENE_MAX_SHARE_SUPPLY) ? counterpart.translate("account.user_issued_assets.too_large") :
+                null;
+        } catch(err) {
+            console.log("err:", err);
+            errors.max_supply = counterpart.translate("account.user_issued_assets.too_large");
+        }
 
         let isValid = !errors.symbol && !errors.max_supply;
 
@@ -551,7 +560,7 @@ class AccountAssetCreate extends React.Component {
                         </tr>
                     </tbody>
                 </table>
-            )
+            );
         }
 
         return (
diff --git a/app/components/Account/AccountAssetUpdate.jsx b/app/components/Account/AccountAssetUpdate.jsx
index fb1812fdbe..b06467edf4 100644
--- a/app/components/Account/AccountAssetUpdate.jsx
+++ b/app/components/Account/AccountAssetUpdate.jsx
@@ -22,7 +22,7 @@ import {BitAssetOptions} from "./AccountAssetCreate";
 import assetConstants from "chain/asset_constants";
 import AssetWhitelist from "./AssetWhitelist";
 
-let MAX_SAFE_INT = new big("9007199254740991");
+let GRAPHENE_MAX_SHARE_SUPPLY = new big(assetConstants.GRAPHENE_MAX_SHARE_SUPPLY);
 
 class AccountAssetUpdate extends React.Component {
 
@@ -236,7 +236,7 @@ class AccountAssetUpdate extends React.Component {
 
             case "max_market_fee":
                 let marketFee = e.amount.replace(/,/g, "");
-                if ((new big(marketFee)).times(precision).gt(MAX_SAFE_INT)) {
+                if ((new big(marketFee)).times(Math.pow(10, precision)).gt(GRAPHENE_MAX_SHARE_SUPPLY)) {
                     updateState = false;
                     return this.setState({errors: {max_market_fee: "The number you tried to enter is too large"}});
                 }
@@ -245,13 +245,13 @@ class AccountAssetUpdate extends React.Component {
 
             case "max_supply":
                 let maxSupply = e.amount.replace(/,/g, "");
-                try {
-                    if ((new big(maxSupply)).times(precision).gt(MAX_SAFE_INT)) {
-                        updateState = false;
-                        return this.setState({errors: {max_supply: "The number you tried to enter is too large"}});
-                    }
-                    update[value] = utils.limitByPrecision(maxSupply, this.props.asset.get("precision"));
-                } catch(e) {}
+                // try {
+                //     if ((new big(maxSupply)).times(Math.pow(10, precision)).gt(GRAPHENE_MAX_SHARE_SUPPLY)) {
+                //         updateState = false;
+                //         return this.setState({errors: {max_supply: "The number you tried to enter is too large"}});
+                //     }
+                update[value] = utils.limitByPrecision(maxSupply, this.props.asset.get("precision"));
+                // } catch(e) {}
                 break;
 
             default:
@@ -275,7 +275,15 @@ class AccountAssetUpdate extends React.Component {
             base_asset: null
         };
 
-        errors.max_supply = new_state.max_supply <= 0 ? counterpart.translate("account.user_issued_assets.max_positive") : null;
+        const p = this.props.asset.get("precision");
+        try {
+            errors.max_supply = new_state.max_supply <= 0 ? counterpart.translate("account.user_issued_assets.max_positive") :
+                (new big(parseInt(new_state.max_supply, 10))).times(Math.pow(10, p)).gt(GRAPHENE_MAX_SHARE_SUPPLY) ? counterpart.translate("account.user_issued_assets.too_large") :
+                null;
+        } catch(err) {
+            console.log("err:", err);
+            errors.max_supply = counterpart.translate("account.user_issued_assets.too_large");
+        }
 
         if (cer) {
             if (cer.quote.asset_id !== asset.get("id") && cer.base.asset_id !== asset.get("id")) {
@@ -420,8 +428,8 @@ class AccountAssetUpdate extends React.Component {
         let cr_base_asset = ChainStore.getAsset(core_exchange_rate.base.asset_id);
         let basePrecision = utils.get_asset_precision(cr_base_asset.get("precision"));
 
-        let cr_quote_amount = (new big(core_exchange_rate.quote.amount)).times(precision).toString();
-        let cr_base_amount = (new big(core_exchange_rate.base.amount)).times(basePrecision).toString();
+        let cr_quote_amount = (new big(core_exchange_rate.quote.amount)).times(Math.pow(10, precision)).toString();
+        let cr_base_amount = (new big(core_exchange_rate.base.amount)).times(Math.pow(10, basePrecision)).toString();
 
         let originalPermissions = assetUtils.getFlagBooleans(asset.getIn(["options", "issuer_permissions"]), asset.get("bitasset") !== undefined);
         // Loop over flags
diff --git a/app/lib/chain/asset_constants.js b/app/lib/chain/asset_constants.js
index d67da16baf..7557f4cd0c 100644
--- a/app/lib/chain/asset_constants.js
+++ b/app/lib/chain/asset_constants.js
@@ -18,7 +18,8 @@ module.exports = {
         "disable_confidential"
     ],
     GRAPHENE_100_PERCENT: 10000,
-    GRAPHENE_1_PERCENT: 10000 / 100
+    GRAPHENE_1_PERCENT: 10000 / 100,
+    GRAPHENE_MAX_SHARE_SUPPLY: "1000000000000000"
 };
 
 

From b60990500de8d2ffa9023e41bcc6b45abef14ce7 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 12:00:57 +0200
Subject: [PATCH 72/82] Fix #571: Reuse the connection check promise and return
 in onConnect if already in progress

---
 app/routerTransition.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/routerTransition.js b/app/routerTransition.js
index ae6626b87e..df5f639abb 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -53,7 +53,8 @@ const filterAndSortURLs = (count, latencies) => {
 };
 
 
-
+let _connectInProgress = false;
+let _connectionCheckPromise = null
 const willTransitionTo = (nextState, replaceState, callback, appInit=true) => { //appInit is true when called via router onEnter, and false when node is manually selected in access settings
     const apiLatencies = SettingsStore.getState().apiLatencies;
     let apiLatenciesCount = Object.keys(apiLatencies).length;
@@ -83,6 +84,8 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
     }
 
     var onConnect = () => {
+        if (_connectInProgress) return callback();
+        _connectInProgress = true;
         if (Apis.instance()) {
             let currentUrl = Apis.instance().url;
             SettingsActions.changeSetting({setting: "activeNode", value: currentUrl});
@@ -102,6 +105,7 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
         } catch(err) {
             console.log("db init error:", err);
             replaceState("/init-error");
+            _connectInProgress = false;
             return callback();
         }
         return Promise.all([db, SettingsStore.init()]).then(() => {
@@ -136,14 +140,15 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
                     }),
                     WalletManagerStore.init()
                 ]).then(()=> {
+                    _connectInProgress = false;
                     SettingsActions.changeSetting({setting: "activeNode", value: connectionManager.url});
                     callback();
                 });
             })
-
         }).catch(err => {
             console.error(err);
             replaceState("/init-error");
+            _connectInProgress = false;
             callback();
         });
     };
@@ -169,8 +174,13 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
             .then(onConnect).catch(onResetError);
         });
     }
-    let connectionCheckPromise = !apiLatenciesCount ? connectionManager.checkConnections() : null;
+    let connectionCheckPromise = !apiLatenciesCount ?
+        _connectionCheckPromise ? _connectionCheckPromise :
+        connectionManager.checkConnections() : null;
+    _connectionCheckPromise = connectionCheckPromise;
+
     Promise.all([connectionCheckPromise]).then((res => {
+        _connectionCheckPromise = null;
         if (connectionCheckPromise && res[0]) {
             let [latencies] = res;
             urls = filterAndSortURLs(Object.keys(latencies).length, latencies);

From b67a3c0cfc849f2215955957de9a362d4ba3cf32 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Fri, 13 Oct 2017 15:27:57 +0200
Subject: [PATCH 73/82] Fix App.jsx synced state to mean blockchain sync status
 #543

---
 app/App.jsx                      | 46 +++++++++++++++++++++++---------
 app/components/Layout/Footer.jsx | 14 +++++-----
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/app/App.jsx b/app/App.jsx
index 508bac3bd1..96f489576b 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -1,5 +1,4 @@
 import {ChainStore} from "bitsharesjs/es";
-import {Apis} from "bitsharesjs-ws";
 import React from "react";
 import IntlStore from "stores/IntlStore";
 import AccountStore from "stores/AccountStore";
@@ -36,7 +35,7 @@ class App extends React.Component {
         let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
         this.state = {
             loading: false,
-            synced: ChainStore.subscribed,
+            synced: this._getSyncStatus(),
             syncFail,
             theme: SettingsStore.getState().settings.get("themes"),
             disableChat: SettingsStore.getState().settings.get("disableChat", true),
@@ -49,31 +48,39 @@ class App extends React.Component {
 
         this._rebuildTooltips = this._rebuildTooltips.bind(this);
         this._onSettingsChange = this._onSettingsChange.bind(this);
+        this._chainStoreSub = this._chainStoreSub.bind(this);
     }
 
     componentWillUnmount() {
         NotificationStore.unlisten(this._onNotificationChange);
         SettingsStore.unlisten(this._onSettingsChange);
+        ChainStore.unsubscribe(this._chainStoreSub);
     }
 
-    componentDidMount() {
+    _getSyncStatus() {
+        let dynGlobalObject = ChainStore.getObject("2.1.0");
+        if (dynGlobalObject) {
+            let block_time = dynGlobalObject.get("time") + "+00:00";
+            let bt = (new Date(block_time).getTime() + ChainStore.getEstimatedChainTimeOffset()) / 1000;
+            let now = new Date().getTime() / 1000;
+            return Math.abs(now - bt) < 5;
+        }
+        return true;
+    }
+
+    _setListeners() {
         try {
             NotificationStore.listen(this._onNotificationChange.bind(this));
             SettingsStore.listen(this._onSettingsChange);
-            ChainStore.subscribe(() => {
-                if (ChainStore.subscribed !== this.state.synced || ChainStore.subError) {
-                    let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
-                    this.setState({
-                        synced: ChainStore.subscribed,
-                        syncFail
-                    });
-                }
-            });
-
+            ChainStore.subscribe(this._chainStoreSub);
             AccountStore.tryToSetCurrentAccount();
         } catch(e) {
             console.error("e:", e);
         }
+    }
+
+    componentDidMount() {
+        this._setListeners();
         const user_agent = navigator.userAgent.toLowerCase();
         if (!(window.electron || user_agent.indexOf("firefox") > -1 || user_agent.indexOf("chrome") > -1 || user_agent.indexOf("edge") > -1)) {
             this.refs.browser_modal.show();
@@ -98,6 +105,19 @@ class App extends React.Component {
         }, 1500);
     }
 
+    _chainStoreSub() {
+        let synced = this._getSyncStatus();
+        if (synced !== this.state.synced) {
+            this.setState({synced});
+        }
+        if (ChainStore.subscribed !== this.state.synced || ChainStore.subError) {
+            let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
+            this.setState({
+                syncFail
+            });
+        }
+    }
+
     /** Usage: NotificationActions.[success,error,warning,info] */
     _onNotificationChange() {
         let notification = NotificationStore.getState().notification;
diff --git a/app/components/Layout/Footer.jsx b/app/components/Layout/Footer.jsx
index 9dc8d5a518..b872785fa9 100644
--- a/app/components/Layout/Footer.jsx
+++ b/app/components/Layout/Footer.jsx
@@ -75,9 +75,6 @@ class Footer extends React.Component {
         const { state } = this;
         let block_height = this.props.dynGlobalObject.get("head_block_number");
         let block_time = this.props.dynGlobalObject.get("time") + "+00:00";
-        // console.log("block_time", block_time)
-        let bt = (new Date(block_time).getTime() + ChainStore.getEstimatedChainTimeOffset()) / 1000;
-        let now = new Date().getTime() / 1000;
         let version_match = APP_VERSION.match(/2\.0\.(\d\w+)/);
         let version = version_match ? `.${version_match[1]}` : ` ${APP_VERSION}`;
         let updateStyles = {display: "inline-block", verticalAlign: "top"}
@@ -104,7 +101,7 @@ class Footer extends React.Component {
                             {state.newVersion && <Translate content="footer.update_available" style={{color: "#FCAB53", position: "absolute", top: "8px", left: "36px"}}/>}
                         </div>
                     </div>
-                    {this.props.synced ? null : <div className="grid-block shrink txtlabel error"><Translate content="footer.nosync" />&nbsp; &nbsp;</div>}
+                    {this.props.synced ? null : <div className="grid-block shrink txtlabel error flash"><Translate content="footer.nosync" />&nbsp; &nbsp;</div>}
                     {this.props.rpc_connection_status === "closed" ? <div className="grid-block shrink txtlabel error"><Translate content="footer.connection" />&nbsp; &nbsp;</div> : null}
                     {this.props.backup_recommended ? <span>
                         <div className="grid-block">
@@ -124,8 +121,13 @@ class Footer extends React.Component {
                     {block_height ?
                         (<div className="grid-block shrink">
                             <Translate content="footer.block" /> &nbsp;
-                            <pre>#{block_height} </pre> &nbsp;
-                            { now - bt > 5 ? <TimeAgo ref="footer_head_timeago" time={block_time} /> : <span data-tip="Synchronized" data-place="left"><Icon name="checkmark-circle" /></span> }
+                            { !this.props.synced ?
+                                <TimeAgo ref="footer_head_timeago" time={block_time} /> :
+                                <span data-tip="Synchronized" data-place="left">
+                                    <span>#{block_height} </span> &nbsp;
+                                    <Icon name="checkmark-circle" />
+                                </span>
+                            }
                         </div>) :
                         <div className="grid-block shrink"><Translate content="footer.loading" /></div>}
                 </div>

From 187a950d56fe5a34b23e6be36679188f2f2eac85 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sat, 14 Oct 2017 08:59:35 +0200
Subject: [PATCH 74/82] Add some padding to the lower div in dashboard

---
 app/components/Dashboard/Dashboard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Dashboard/Dashboard.jsx b/app/components/Dashboard/Dashboard.jsx
index 4318783b08..1ec8624435 100644
--- a/app/components/Dashboard/Dashboard.jsx
+++ b/app/components/Dashboard/Dashboard.jsx
@@ -195,7 +195,7 @@ class Dashboard extends React.Component {
                     </div>
 
                     {accountCount ? (
-                        <div>
+                        <div style={{paddingBottom: "3rem"}}>
                             <div className="hide-selector" style={{paddingBottom: "1rem"}}>
                                 {entries.map((type, index) => {
                                     return (

From 1e3e6643a8b7162df8dc4abb9febd34f6dc24c69 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sat, 14 Oct 2017 09:25:38 +0200
Subject: [PATCH 75/82] Fix #563: Settlement box width

---
 app/components/Exchange/OpenSettleOrders.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Exchange/OpenSettleOrders.jsx b/app/components/Exchange/OpenSettleOrders.jsx
index 20fdf43fb3..7365c60f65 100644
--- a/app/components/Exchange/OpenSettleOrders.jsx
+++ b/app/components/Exchange/OpenSettleOrders.jsx
@@ -100,7 +100,7 @@ class OpenSettleOrders extends React.Component {
                 key="open_orders"
                 className="grid-block no-overflow small-12 no-padding vertical medium-horizontal middle-content"
             >
-                <div className="small-6 order-1" style={{paddingBottom: "1rem"}}>
+                <div className="small-12 medium-6 large-6 xlarge-4 order-1" style={{paddingBottom: "1rem"}}>
                     <div className="exchange-bordered">
                         <div className="exchange-content-header">
                             <Translate content="exchange.settle_orders" />

From 8f734ed96941e92cedd439ecab977228ac8da2c9 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sat, 14 Oct 2017 09:26:39 +0200
Subject: [PATCH 76/82] Minor fixes

---
 app/components/Account/RecentTransactions.jsx | 2 +-
 app/components/Layout/MobileMenu.jsx          | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/components/Account/RecentTransactions.jsx b/app/components/Account/RecentTransactions.jsx
index c6c970e80a..3bcab493b3 100644
--- a/app/components/Account/RecentTransactions.jsx
+++ b/app/components/Account/RecentTransactions.jsx
@@ -213,7 +213,7 @@ class RecentTransactions extends React.Component {
             }) : [<tr key="no_recent"><td colSpan={compactView ? "2" : "3"}><Translate content="operation.no_recent" /></td></tr>];
         display_history.push(
             <tr className="total-value" key="total_value">
-                <td>
+                <td className="column-hide-tiny">
                 </td>
                 <td style={alignRight}>
                     {historyCount > 0 ?
diff --git a/app/components/Layout/MobileMenu.jsx b/app/components/Layout/MobileMenu.jsx
index cd021c853e..5c78a86ed1 100644
--- a/app/components/Layout/MobileMenu.jsx
+++ b/app/components/Layout/MobileMenu.jsx
@@ -36,7 +36,11 @@ class MobileMenu extends React.Component {
         let accounts = null;
 
         if(linkedAccounts.size > 1) {
-            accounts = linkedAccounts.map( a => {
+            accounts = linkedAccounts.sort((a, b) => {
+                if (a > b) return 1;
+                if (a < b) return -1;
+                return 0;
+            }).map( a => {
                 return <li key={a} onClick={this.onClick}><Link to={`/account/${a}/overview`}>{a}</Link></li>;
             });
         }  else if (linkedAccounts.size === 1) {
@@ -44,8 +48,7 @@ class MobileMenu extends React.Component {
         }
 
         let linkToAccountOrDashboard;
-        if (linkedAccounts.size > 1) linkToAccountOrDashboard = <a onClick={this._onNavigate.bind(this, "/dashboard")}><Translate content="header.dashboard" /></a>;
-        else if (linkedAccounts.size === 1) linkToAccountOrDashboard = <a onClick={this._onNavigate.bind(this, `/account/${linkedAccounts.first()}/overview`)}><Translate content="header.account" /></a>;
+        if (linkedAccounts.size > 0) linkToAccountOrDashboard = <a onClick={this._onNavigate.bind(this, "/dashboard")}><Translate content="header.dashboard" /></a>;
         else linkToAccountOrDashboard = <Link to="/create-account">Create Account</Link>;
 
         let tradeLink = this.props.lastMarket ?

From 0fbdddbda691b5beec98bef59c9caebbaa1cc2d9 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sat, 14 Oct 2017 11:04:29 +0200
Subject: [PATCH 77/82] Fix ChainStore failing to notify after reset and
 latency check counter

---
 app/routerTransition.js | 8 ++++----
 package.json            | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/routerTransition.js b/app/routerTransition.js
index df5f639abb..0a18987934 100644
--- a/app/routerTransition.js
+++ b/app/routerTransition.js
@@ -12,7 +12,7 @@ import AccountStore from "stores/AccountStore";
 import ls from "common/localStorage";
 const STORAGE_KEY = "__graphene__";
 const ss = new ls(STORAGE_KEY);
-const latencyChecks = ss.get("latencyChecks", 1);
+let latencyChecks;
 import counterpart from "counterpart";
 
 // Actions
@@ -54,9 +54,10 @@ const filterAndSortURLs = (count, latencies) => {
 
 
 let _connectInProgress = false;
-let _connectionCheckPromise = null
+let _connectionCheckPromise = null;
 const willTransitionTo = (nextState, replaceState, callback, appInit=true) => { //appInit is true when called via router onEnter, and false when node is manually selected in access settings
     const apiLatencies = SettingsStore.getState().apiLatencies;
+    latencyChecks = ss.get("latencyChecks", 1);
     let apiLatenciesCount = Object.keys(apiLatencies).length;
     let connectionStart;
 
@@ -92,7 +93,6 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
             if (!autoSelection) SettingsActions.changeSetting({setting: "apiServer", value: currentUrl});
             if (!(currentUrl in apiLatencies)) {
                 apiLatencies[currentUrl] = new Date().getTime() - connectionStart;
-                console.log("set latency to:", apiLatencies[currentUrl]);
             }
         }
         const currentChain = Apis.instance().chain_id;
@@ -154,7 +154,7 @@ const willTransitionTo = (nextState, replaceState, callback, appInit=true) => {
     };
 
     var onResetError = (err) => {
-        console.log("err:", err);
+        console.log("onResetError:", err);
         oldChain = "old";
         connect = true;
         notify.addNotification({
diff --git a/package.json b/package.json
index 5a24721432..96857f2f34 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "alt-container": "^1.0.0",
     "alt-react": "0.0.1",
     "bignumber.js": "^4.0.0",
-    "bitsharesjs": "^1.3.3",
+    "bitsharesjs": "^1.3.4",
     "classnames": "^2.2.1",
     "cookies-js": "^1.2.1",
     "counterpart": "^0.17.1",

From c8cf1bcdf479db999e0683d41bc69efbeedbd296 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sat, 14 Oct 2017 11:23:36 +0200
Subject: [PATCH 78/82] Fix #543: Add sync status check interval, 'Synced/Out
 of sync/Disconnected' warning in Footer

---
 app/App.jsx                                   | 17 +++--
 app/assets/locales/locale-en.json             | 12 ++-
 .../stylesheets/components/_footer.scss       | 76 +++++++++++--------
 .../stylesheets/themes/_dark-theme.scss       |  4 +-
 .../stylesheets/themes/_theme-template.scss   | 11 +++
 app/components/Layout/Footer.jsx              | 73 +++++++++---------
 6 files changed, 117 insertions(+), 76 deletions(-)

diff --git a/app/App.jsx b/app/App.jsx
index 96f489576b..53d55a45ff 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -35,7 +35,7 @@ class App extends React.Component {
         let syncFail = ChainStore.subError && (ChainStore.subError.message === "ChainStore sync error, please check your system clock") ? true : false;
         this.state = {
             loading: false,
-            synced: this._getSyncStatus(),
+            synced: this._syncStatus(),
             syncFail,
             theme: SettingsStore.getState().settings.get("themes"),
             disableChat: SettingsStore.getState().settings.get("disableChat", true),
@@ -49,23 +49,29 @@ class App extends React.Component {
         this._rebuildTooltips = this._rebuildTooltips.bind(this);
         this._onSettingsChange = this._onSettingsChange.bind(this);
         this._chainStoreSub = this._chainStoreSub.bind(this);
+        this._syncStatus = this._syncStatus.bind(this);
     }
 
     componentWillUnmount() {
         NotificationStore.unlisten(this._onNotificationChange);
         SettingsStore.unlisten(this._onSettingsChange);
         ChainStore.unsubscribe(this._chainStoreSub);
+        clearInterval(this.syncCheckInterval);
     }
 
-    _getSyncStatus() {
+    _syncStatus(setState = false) {
+        let synced = true;
         let dynGlobalObject = ChainStore.getObject("2.1.0");
         if (dynGlobalObject) {
             let block_time = dynGlobalObject.get("time") + "+00:00";
             let bt = (new Date(block_time).getTime() + ChainStore.getEstimatedChainTimeOffset()) / 1000;
             let now = new Date().getTime() / 1000;
-            return Math.abs(now - bt) < 5;
+            synced = Math.abs(now - bt) < 5;
         }
-        return true;
+        if (setState && synced !== this.state.synced) {
+            this.setState({synced});
+        }
+        return synced;
     }
 
     _setListeners() {
@@ -81,6 +87,7 @@ class App extends React.Component {
 
     componentDidMount() {
         this._setListeners();
+        this.syncCheckInterval = setInterval(this._syncStatus, 5000);
         const user_agent = navigator.userAgent.toLowerCase();
         if (!(window.electron || user_agent.indexOf("firefox") > -1 || user_agent.indexOf("chrome") > -1 || user_agent.indexOf("edge") > -1)) {
             this.refs.browser_modal.show();
@@ -106,7 +113,7 @@ class App extends React.Component {
     }
 
     _chainStoreSub() {
-        let synced = this._getSyncStatus();
+        let synced = this._syncStatus();
         if (synced !== this.state.synced) {
             this.setState({synced});
         }
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index e69116e763..495e4b5327 100644
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -71,7 +71,10 @@
     "withdraw_address": "If you don't already have a %(asset)s address, please find a wallet provider and create one in order to complete the withdrawal.",
     "memo_tip": "You may include any message in the memo field. Memos are optional but generally required for transfers to exchanges.",
     "generate": "The generated password was created by your browser, locally. <br /><br /><strong>No one but you has access to it</strong>.<br /><br /> Paste it below and save a copy in a safe place",
-    "copy_password": "Click here to copy the password to your clipboard"
+    "copy_password": "Click here to copy the password to your clipboard",
+    "sync_yes": "The current node is in sync with the blockchain",
+    "sync_no": "The current node is out of sync with the blockchain, try switching to another one",
+    "disconnected": "You are not connected to an API node, try reloading or setting a new access point in the Settings"
   },
   "propose": "Propose",
   "cancel": "Cancel",
@@ -873,10 +876,13 @@
     "block": "Head block",
     "loading": "Loading...",
     "backup": "A Backup is Required",
-    "nosync": "Blockchain is out of sync, please wait until it's synchronized..",
+    "nosync": "Your active node is out of sync",
     "connection": "No Blockchain connection",
     "brainkey": "Backup brainkey recommended",
-    "update_available": "UPDATE AVAILABLE"
+    "update_available": "UPDATE AVAILABLE",
+    "synced": "Synced",
+    "unsynced": "Out of sync",
+    "disconnected": "Disconnected"
   },
   "exchange": {
     "chart_options": {
diff --git a/app/assets/stylesheets/components/_footer.scss b/app/assets/stylesheets/components/_footer.scss
index a605a2246f..ab49afe3a5 100644
--- a/app/assets/stylesheets/components/_footer.scss
+++ b/app/assets/stylesheets/components/_footer.scss
@@ -1,37 +1,53 @@
 .footer {
-  text-transform: lowercase;
-  font-variant: small-caps;
-  font-weight: bold;
-  pre {
-      font-size: 0.8rem;
-  }
-  background-color: #777;
-  height: 36px;
-  line-height: 36px;
-  vertical-align: middle;
-  color: #fff;
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
-  a {
-    text-decoration: underline;
-  }
+    text-transform: lowercase;
+    font-variant: small-caps;
+    font-weight: bold;
+    div.footer-status {
+        position: absolute;
+        right: 0;
+        > span {
+            position: relative;
+            top: -9px;
+        }
+    }
+    div.footer-block {
+        position: relative;
+        bottom: 0;
+        > span {
+            position: relative;
+            top: 7px;
+            > span:nth-of-type(2) {
+                font-size: 0.9rem;
+            }
+        }
+    }
+    background-color: #777;
+    height: 36px;
+    line-height: 36px;
+    vertical-align: middle;
+    color: #fff;
+    padding-left: 1.75rem;
+    padding-right: 1.75rem;
+    a {
+        text-decoration: underline;
+    }
 
-  .logo {
-      padding-right: 0.5rem;
-      border-right: 1px solid $border-color;
-      font-weight: bold;
-    font-size: 1.1rem;
-    line-height: 2rem;
-    .version {
-      font-size: 75%;
-      vertical-align: baseline;
+    .logo {
+        padding-right: 0.5rem;
+        border-right: 1px solid $border-color;
+        font-weight: bold;
+        font-size: 1.1rem;
+        line-height: 2rem;
+        .version {
+            font-size: 75%;
+            vertical-align: baseline;
+        }
     }
-  }
 
-  > div > div:last-of-type {
-      padding-left: 0.5rem;
-      border-left: 1px solid $border-color;
-  }
+    > div > div:last-of-type {
+        padding-left: 1rem;
+        border-left: 1px solid $border-color;
+    }
 }
 
 .logo svg {
diff --git a/app/assets/stylesheets/themes/_dark-theme.scss b/app/assets/stylesheets/themes/_dark-theme.scss
index 5ce670f13d..0dab1c6780 100644
--- a/app/assets/stylesheets/themes/_dark-theme.scss
+++ b/app/assets/stylesheets/themes/_dark-theme.scss
@@ -7,7 +7,7 @@ $dark-text-color: #444;
 $primary-text-color: #ffffff;
 $secondary-text-color: darken($primary-text-color, 20%);
 $link-text-color: #4A90E2;
-$error-text-color: #E3745B;
+$error-text-color: #ff3950;
 
 $bg-color: #2a2a2a;
 $panel-bg-color: #3f3f3f;
@@ -19,7 +19,7 @@ $input-background: lighten($bg-color, 8%);
 
 $alert-color: $error-text-color;
 $info-color: #A0D3E8;
-$success-color: #50D2C2;
+$success-color: #7bd500;
 $warning-color: #FCAB53;
 $fee-color: $secondary-text-color;
 
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
index b63be9f337..206d0ae6a5 100644
--- a/app/assets/stylesheets/themes/_theme-template.scss
+++ b/app/assets/stylesheets/themes/_theme-template.scss
@@ -1322,6 +1322,17 @@
     span.warning {
         color: darken($warning-color, 15%);
     }
+
+    .footer {
+        div.footer-status {
+            > span.success {
+                color: $success-color;
+            }
+            > span.warning {
+                color: $alert-color;
+            }
+        }
+    }
 }
 
 .olDarkTheme .gate_fee .amount-selector {
diff --git a/app/components/Layout/Footer.jsx b/app/components/Layout/Footer.jsx
index b872785fa9..5787f75e30 100644
--- a/app/components/Layout/Footer.jsx
+++ b/app/components/Layout/Footer.jsx
@@ -5,10 +5,9 @@ import BindToChainState from "../Utility/BindToChainState";
 import ChainTypes from "../Utility/ChainTypes";
 import CachedPropertyStore from "stores/CachedPropertyStore";
 import BlockchainStore from "stores/BlockchainStore";
-import {ChainStore} from "bitsharesjs/es";
 import WalletDb from "stores/WalletDb";
-import TimeAgo from "../Utility/TimeAgo";
 import Icon from "../Icon/Icon";
+import counterpart from "counterpart";
 
 class Footer extends React.Component {
 
@@ -43,7 +42,7 @@ class Footer extends React.Component {
             nextProps.backup_recommended !== this.props.backup_recommended ||
             nextProps.rpc_connection_status !== this.props.rpc_connection_status ||
             nextProps.synced !== this.props.synced
-       );
+        );
     }
 
     checkNewVersionAvailable(){
@@ -73,11 +72,13 @@ class Footer extends React.Component {
 
     render() {
         const { state } = this;
+        const {synced} = this.props;
+        const connected = !(this.props.rpc_connection_status === "closed");
+
         let block_height = this.props.dynGlobalObject.get("head_block_number");
-        let block_time = this.props.dynGlobalObject.get("time") + "+00:00";
         let version_match = APP_VERSION.match(/2\.0\.(\d\w+)/);
         let version = version_match ? `.${version_match[1]}` : ` ${APP_VERSION}`;
-        let updateStyles = {display: "inline-block", verticalAlign: "top"}
+        let updateStyles = {display: "inline-block", verticalAlign: "top"};
         let logoProps = {};
 
         return (
@@ -86,29 +87,31 @@ class Footer extends React.Component {
                     <div className="grid-block">
                         <div className="logo" style={
                             {
-                              fontSize: state.newVersion ? "0.9em" : "1em",
-                              cursor: state.newVersion ? "pointer" : "normal",
-                              marginTop: state.newVersion ? "-5px" : "0px",
-                              overflow: "hidden"
+                                fontSize: state.newVersion ? "0.9em" : "1em",
+                                cursor: state.newVersion ? "pointer" : "normal",
+                                marginTop: state.newVersion ? "-5px" : "0px",
+                                overflow: "hidden"
                             }
                         } onClick={state.newVersion ? this.downloadVersion.bind(this)  : null} {...logoProps}>
-                            {state.newVersion && <Icon name="download" style={{marginRight: "20px", marginTop: "10px", fontSize: "1.35em",  display: "inline-block"}} />}
-                            <span style={updateStyles}>
-                              <Translate content="footer.title"  />
-                              <span className="version">{version}</span>
-                            </span>
+                        {state.newVersion && <Icon name="download" style={{marginRight: "20px", marginTop: "10px", fontSize: "1.35em",  display: "inline-block"}} />}
+                        <span style={updateStyles}>
+                            <Translate content="footer.title"  />
+                            <span className="version">{version}</span>
+                        </span>
 
-                            {state.newVersion && <Translate content="footer.update_available" style={{color: "#FCAB53", position: "absolute", top: "8px", left: "36px"}}/>}
+                        {state.newVersion && <Translate content="footer.update_available" style={{color: "#FCAB53", position: "absolute", top: "8px", left: "36px"}}/>}
                         </div>
                     </div>
-                    {this.props.synced ? null : <div className="grid-block shrink txtlabel error flash"><Translate content="footer.nosync" />&nbsp; &nbsp;</div>}
-                    {this.props.rpc_connection_status === "closed" ? <div className="grid-block shrink txtlabel error"><Translate content="footer.connection" />&nbsp; &nbsp;</div> : null}
-                    {this.props.backup_recommended ? <span>
+                    {synced ? null : <div className="grid-block shrink txtlabel cancel"><Translate content="footer.nosync" />&nbsp; &nbsp;</div>}
+                    {!connected ? <div className="grid-block shrink txtlabel error"><Translate content="footer.connection" />&nbsp; &nbsp;</div> : null}
+                    {this.props.backup_recommended ?
+                    <span>
                         <div className="grid-block">
                             <a className="shrink txtlabel facolor-alert"
                                 data-tip="Please understand that you are responsible for making your own backup&hellip;"
                                 data-type="warning"
-                                onClick={this.onBackup.bind(this)}><Translate content="footer.backup" /></a>
+                                onClick={this.onBackup.bind(this)}><Translate content="footer.backup" />
+                            </a>
                             &nbsp;&nbsp;
                         </div>
                     </span> : null}
@@ -119,17 +122,21 @@ class Footer extends React.Component {
                         </div>
                     </span>:null}
                     {block_height ?
-                        (<div className="grid-block shrink">
-                            <Translate content="footer.block" /> &nbsp;
-                            { !this.props.synced ?
-                                <TimeAgo ref="footer_head_timeago" time={block_time} /> :
-                                <span data-tip="Synchronized" data-place="left">
-                                    <span>#{block_height} </span> &nbsp;
-                                    <Icon name="checkmark-circle" />
+                    (<div className="grid-block shrink">
+                        <div className="tooltip" data-tip={counterpart.translate(`tooltip.${!connected ? "disconnected" : synced ? "sync_yes" : "sync_no"}`)} data-place="top">
+                            <div className="footer-status">
+                                { !synced || !connected ?
+                                    <span className="warning"><Translate content={`footer.${!synced ? "unsynced" : "disconnected"}`} /></span> :
+                                    <span className="success"><Translate content="footer.synced" /></span>}
+                                </div>
+                                <div className="footer-block">
+                                    <span><Translate content="footer.block" />
+                                    <span>&nbsp;#{block_height}</span>
                                 </span>
-                            }
-                        </div>) :
-                        <div className="grid-block shrink"><Translate content="footer.loading" /></div>}
+                            </div>
+                        </div>
+                    </div>) :
+                    <div className="grid-block shrink"><Translate content="footer.loading" /></div>}
                 </div>
             </div>
         );
@@ -153,14 +160,8 @@ class AltFooter extends Component {
             stores={[CachedPropertyStore, BlockchainStore, WalletDb]}
             inject ={{
                 backup_recommended: ()=>
-                    (wallet && ( ! wallet.backup_date || CachedPropertyStore.get("backup_recommended"))),
+                (wallet && ( ! wallet.backup_date || CachedPropertyStore.get("backup_recommended"))),
                 rpc_connection_status: ()=> BlockchainStore.getState().rpc_connection_status
-                // Disable notice for separate brainkey backup for now to keep things simple.  The binary wallet backup includes the brainkey...
-                // backup_brainkey_recommended: ()=> {
-                //     var wallet = WalletDb.getWallet()
-                //     if( ! wallet ) return undefined
-                //     return wallet.brainkey_sequence !== 0 && wallet.brainkey_backup_date == null
-                // }
             }}
             ><Footer {...this.props}/>
         </AltContainer>;

From 18b131c084dcd2cf35f22a1161569bf339888629 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sun, 15 Oct 2017 11:01:47 +0200
Subject: [PATCH 79/82] Fix #578: Open orders not displaying all orders

---
 app/components/Exchange/MyOpenOrders.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/Exchange/MyOpenOrders.jsx b/app/components/Exchange/MyOpenOrders.jsx
index a414ebe8b2..8c1231a783 100644
--- a/app/components/Exchange/MyOpenOrders.jsx
+++ b/app/components/Exchange/MyOpenOrders.jsx
@@ -164,7 +164,7 @@ class MyOpenOrders extends React.Component {
             [base.get("id")]: {precision: base.get("precision")},
             [quote.get("id")]: {precision: quote.get("precision")}
         };
-        let limitOrders = orders.map(order => {
+        let limitOrders = orders.toArray().map(order => {
             let o = ChainStore.getObject(order);
             if (!o) return null;
             let sellBase = o.getIn(["sell_price", "base", "asset_id"]), sellQuote = o.getIn(["sell_price", "quote", "asset_id"]);
@@ -173,9 +173,9 @@ class MyOpenOrders extends React.Component {
             ) {
                 return new LimitOrder(o.toJS(), assets, quote.get("id"));
             }
-        }).filter(a => !!a).toArray();
+        }).filter(a => !!a);
 
-        let callOrders = call_orders.map(order => {
+        let callOrders = call_orders.toArray().map(order => {
             let o = ChainStore.getObject(order);
             if (!o) return null;
             let sellBase = o.getIn(["call_price", "base", "asset_id"]), sellQuote = o.getIn(["call_price", "quote", "asset_id"]);
@@ -184,8 +184,7 @@ class MyOpenOrders extends React.Component {
             ) {
                 return this.props.feedPrice ? new CallOrder(o.toJS(), assets, quote.get("id"), this.props.feedPrice) : null;
             }
-        }).filter(a => !!a).filter(a => a.isMarginCalled()).toArray();
-
+        }).filter(a => !!a).filter(a => a.isMarginCalled());
         return limitOrders.concat(callOrders);
     }
 

From 5b8e718cc04169b77796da7b77721fc06a2f9adc Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sun, 15 Oct 2017 11:15:08 +0200
Subject: [PATCH 80/82] Remove forced create account step position #576

---
 app/components/Account/CreateAccount.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/Account/CreateAccount.jsx b/app/components/Account/CreateAccount.jsx
index f9bf520d7e..2d6c4b3528 100644
--- a/app/components/Account/CreateAccount.jsx
+++ b/app/components/Account/CreateAccount.jsx
@@ -367,9 +367,7 @@ class CreateAccount extends React.Component {
 
     render() {
         let {step} = this.state;
-        step = 1;
-        // let my_accounts = AccountStore.getMyAccounts();
-        // let firstAccount = my_accounts.length === 0;
+        
         return (
             <div className="sub-content">
 

From 6671920d540ac5db34afe9aa8b5dcff2a2a729d4 Mon Sep 17 00:00:00 2001
From: Calvin Froedge <calvinfroedge@gmail.com>
Date: Sun, 15 Oct 2017 04:55:31 -0500
Subject: [PATCH 81/82] iss 496 - ensure tables retain correct height (#569)

* ensure tables retain correct height

* Decrease interval time

* Don't call onChangeTab when clicking on currently active tab
---
 .../stylesheets/layout/_page_layout.scss      | 17 +++++++++++++++-
 app/components/Account/AccountOverview.jsx    | 20 +++++++++++++++++--
 app/components/Utility/Tabs.jsx               |  3 +++
 app/lib/common/tableHeightHelper.js           | 19 ++++++++++++++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 app/lib/common/tableHeightHelper.js

diff --git a/app/assets/stylesheets/layout/_page_layout.scss b/app/assets/stylesheets/layout/_page_layout.scss
index 82d1f46bcd..59ae25f6c9 100644
--- a/app/assets/stylesheets/layout/_page_layout.scss
+++ b/app/assets/stylesheets/layout/_page_layout.scss
@@ -84,4 +84,19 @@ div.bordered-header {
 
 .table-cell{
   display: table-cell;
-}
\ No newline at end of file
+}
+
+.grid-content.app-tables {
+  box-sizing: border-box;
+  padding-bottom: 1.5rem;
+  min-height: 100%;
+  position: relative;
+}
+
+.grid-content.app-tables > .content-block, .grid-content.app-tables > .content-block > .generic-bordered-box, .grid-content.app-tables > .content-block > .generic-bordered-box > .overview-tabs {
+  height: 100%;
+}
+
+.grid-content.app-tables > .content-block {
+  margin-bottom: 0 !important;
+}
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
index 645af68c71..66bb88d2f2 100644
--- a/app/components/Account/AccountOverview.jsx
+++ b/app/components/Account/AccountOverview.jsx
@@ -32,6 +32,7 @@ import AccountOrders from "./AccountOrders";
 import cnames from "classnames";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
 import { checkMarginStatus } from "common/accountHelper";
+import tableHeightHelper from "lib/common/tableHeightHelper";
 
 class AccountOverview extends React.Component {
 
@@ -59,6 +60,9 @@ class AccountOverview extends React.Component {
                 // "OPEN.DASH"
             ]
         };
+
+        this.tableHeightMountInterval = tableHeightHelper.tableHeightMountInterval.bind(this);
+        this.adjustHeightOnChangeTab = tableHeightHelper.adjustHeightOnChangeTab.bind(this);
     }
 
     componentWillMount() {
@@ -79,6 +83,18 @@ class AccountOverview extends React.Component {
         if (np.account !== this.props.account) this._checkMarginStatus(np);
     }
 
+    componentDidMount(){
+        this.tableHeightMountIntervalInstance = this.tableHeightMountInterval();
+    }
+
+    componentWillUnmount(){
+        clearInterval(this.tableHeightMountIntervalInstance);
+    }
+
+    // adjustHeightOnChangeTab(){
+    //     this.adjustHeightOnChangeTab();
+    // }
+
     shouldComponentUpdate(nextProps, nextState) {
         return (
             !utils.are_equal_shallow(nextProps.balanceAssets, this.props.balanceAssets) ||
@@ -494,10 +510,10 @@ class AccountOverview extends React.Component {
         const hiddenSubText = <span style={{visibility: "hidden"}}>H</span>;
 
         return (
-            <div className="grid-content">
+            <div className="grid-content app-tables" ref="appTables">
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
-                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">
+                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block" onChangeTab={this.adjustHeightOnChangeTab.bind(this)}>
 
                             <Tab disabled className="total-value" title={<span>{counterpart.translate("account.eq_value")}&nbsp;<AssetName name={preferredUnit} noTip /></span>} subText={totalValue}>
 
diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
index 885cfa42eb..fc7f4d6e29 100644
--- a/app/components/Utility/Tabs.jsx
+++ b/app/components/Utility/Tabs.jsx
@@ -84,6 +84,7 @@ class Tabs extends React.Component {
     }
 
     _changeTab(value) {
+        if (value === this.state.activeTab) return;
         // Persist current tab if desired
         if (this.props.setting) {
             SettingsActions.changeViewSetting({
@@ -91,6 +92,8 @@ class Tabs extends React.Component {
             });
         }
         this.setState({activeTab: value});
+
+        if(this.props.onChangeTab) this.props.onChangeTab(value);
     }
 
     render() {
diff --git a/app/lib/common/tableHeightHelper.js b/app/lib/common/tableHeightHelper.js
new file mode 100644
index 0000000000..6be0bb4696
--- /dev/null
+++ b/app/lib/common/tableHeightHelper.js
@@ -0,0 +1,19 @@
+export default {
+    tableHeightMountInterval(){
+        let interval = setInterval(function(){
+            let appTables = this.refs.appTables;
+
+            if(!appTables) return;
+
+            if(parseInt(appTables.style.height) !== appTables.clientHeight){
+                appTables.style.height = `${appTables.clientHeight}px`;
+            }
+        }.bind(this), 10);
+
+        return interval;
+    },
+    adjustHeightOnChangeTab(){
+        let appTables = this.refs.appTables;
+        if (appTables) this.refs.appTables.style.height = "auto";
+    }
+};

From fcd7d7a6e6b91ecd0695bdac7368ef9dbaaec712 Mon Sep 17 00:00:00 2001
From: Sigve Kvalsvik <svk31@users.noreply.github.com>
Date: Sun, 15 Oct 2017 12:22:38 +0200
Subject: [PATCH 82/82] Update version, changelog

---
 CHANGELOG.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  6 +++---
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24b369492d..aef343b3d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,53 @@
+---------------------------------------------------------------------
+Release 2.0.171015
+---------------------------------------------------------------------
+New features
+--------
+- Tables Rewrite - Account Dashboard #378
+- Add an optional encrypted qr code for the private key (#542)
+- #545: Show gateway status as down for unavailable coins
+- #471: Add label to Find Markets add header
+- #560 Show unavailable messages for openledger and rudex if they time out
+- Add whitelisting to asset update page fix #70 and fix #462
+- Clear transfer form once completed (#564)
+- Use new tables styling in dashboard, add accounts/recent switching
+- #500: Set testnet/mainnet faucets depending on current API node
+- #488: Hover state + click toggle for account name QR code
+- Filter out insecure websocket urls when using https
+- #572: Make sure exchange input only allows numbers, no negative input
+- #543: Add sync status check interval, 'Synced/Out of sync/Disconnnected' warning
+
+Bug fixes
+--------
+- #496: Ensure tables retain correct height
+- Remove forced create account step position #576
+- Fix #578: Open orders not displaying all orders
+- Fix ChainStore failing to notify after reset and latency check counter
+- Fix #563: Settlement box width
+- Fix App.jsx synced state to mean blockchain sync status #543
+- Fix #571
+- Fix #479: Max supply bug in asset creation and update
+- #574: Remove nodes that are no longer available
+- Fix issue #294 (#575)
+- Reset backup store when wallet is changed (#570)
+- Fix Backup dashboard link
+- Set cloud wallet login to default, improve settings switching logic
+- #Fix 501: Asset explorer table alignment
+- Fix #567: Explorer My Markets page does not load
+- Round up `for_sale` and down `to_receive`, #562 (#565)
+- Simplify and improve app init chain #531
+- Fix #529: Withrawal modal inputs
+- Fix #483: Remove TRADE.X from dropdown and remove blocktrades gateway
+- #531: Catch some app init errors and redirect, update indexeddbshim
+- Add an image for QR code, fix some styling and translations #444
+- Harmonize login forms between modes
+- Use account.assets from new API to display list of issued assets
+- Set password and username type/name/ids for password managers #527
+- Fix #535: remove ellipsis and cap password length at 45 chars
+- Fix typo (oherwise -> otherwise) (#534)
+- fix: parseInt for minimum_feeds when create asset (#539)
+- #532 change noone to no one
+
 ---------------------------------------------------------------------
 Release 2.0.170914
 ---------------------------------------------------------------------
diff --git a/package.json b/package.json
index 96857f2f34..85adae8ee5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "BitShares2-light",
-  "version": "2.0.171009",
+  "version": "2.0.171015",
   "description": "Advanced wallet interface for the BitShares financial blockchain.",
   "homepage": "https://github.com/bitshares/bitshares-ui",
   "author": "Sigve Kvalsvik <kvalsvik.crypto@gmail.com>",
@@ -184,8 +184,8 @@
     "copyfiles": "^1.2.0",
     "cross-env": "^5.0.5",
     "css-loader": "^0.22.0",
-    "electron": "^1.7.8",
-    "electron-builder": "^19.33.0",
+    "electron": "^1.7.9",
+    "electron-builder": "^19.37.2",
     "es6-promise": "^3.0.2",
     "eslint": "^2.11.1",
     "eslint-plugin-json": "^1.2.0",