#1502: Webpack v4 upgrade (#1551)

* Partial progress, react-stockcharts broken by hot reload * Add lib and new component * Update prettierignore * -Working price chart * Market switching, some styling, custom css added * Fix some data issues * Implement bucket size switching via TradingView chart * Improve market switching and DataFeed subs * Fix DataFeed subscribeBars callback * Increase default chart height and update some colors * Extend bucket resolution logic to include seconds and weeks * Fix TradingView loading for electron * Fix electron edit shortcuts and library_path * Another fix for tradingview chart loading * Fix build and react hot reload * All working except react stockcharts in dev * Update tradingview library * Add symbol description including gateway name, fix some theme issues * #905: Add mobile preset for narrow screens * #905: Add timezone resolution for zones supported by TradingView * Add a 'Native' key for TradingView exchange names * #905: Fix some description and subscription issues * #905: Change depth/price chart toggle to instead trigger a modal with height and chart switching * Improve symbol description, add special case for PPY * Fix inlined svgs * Update package-lock * Fix sticky-table css import * Remove pricechart component
bitshares · May 24, 2018 · fba4ce3 · fba4ce3
1 parent a065e79
commit fba4ce3
Show file tree

Hide file tree

Showing 21 changed files with 3,741 additions and 1,013 deletions.
diff --git a/app/App.jsx b/app/App.jsx
@@ -1,5 +1,6 @@
-import {ChainStore} from "bitsharesjs/es";
+import {hot} from "react-hot-loader";
 import React from "react";
+import {ChainStore} from "bitsharesjs/es";
 import IntlStore from "stores/IntlStore";
 import AccountStore from "stores/AccountStore";
 import SettingsStore from "stores/SettingsStore";
@@ -350,4 +351,5 @@ class Root extends React.Component {
     }
 }
 
-export default supplyFluxContext(alt)(Root);
+Root = supplyFluxContext(alt)(Root);
+export default hot(module)(Root);
diff --git a/app/Routes.jsx b/app/Routes.jsx
diff --git a/app/actions/IntlActions.js b/app/actions/IntlActions.js
@@ -5,9 +5,7 @@ import localeCodes from "assets/locales";
 var locales = {};
 if (__ELECTRON__) {
     localeCodes.forEach(locale => {
-        locales[
-            locale
-        ] = require(`json-loader!assets/locales/locale-${locale}.json`);
+        locales[locale] = require(`assets/locales/locale-${locale}.json`);
     });
 }
 

diff --git a/app/assets/loader-dev.js b/app/assets/loader-dev.js
@@ -1,14 +1,14 @@
 require("./stylesheets/app.scss");
 require("file-loader?name=index.html!./index-dev.html");
 require("file-loader?name=favicon.ico!./favicon.ico");
-require("file-loader?name=dictionary.json!common/dictionary_en.json");
-// require("babel-polyfill");
+// require("file-loader?name=dictionary.json!common/dictionary_en.json");
+require("babel-polyfill");
 require("whatwg-fetch");
 require("indexeddbshim");
 require("./asset-symbols/symbols.js");
 require("./language-dropdown/flags.js");
 
-import locales from "assets/locales";
-for (let locale of locales) {
-    require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
-}
+// import locales from "assets/locales";
+// for (let locale of locales) {
+//     require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
+// }
diff --git a/app/assets/loader.js b/app/assets/loader.js
@@ -3,14 +3,14 @@ require("file-loader?name=index.html!./" +
     (__ELECTRON__ || __HASH_HISTORY__ ? "index-electron" : "index") +
     ".html");
 require("file-loader?name=favicon.ico!./favicon.ico");
-require("file-loader?name=dictionary.json!common/dictionary_en.json");
-// require("babel-polyfill");
+// require("file-loader?name=dictionary.json!common/dictionary_en.json");
+require("babel-polyfill");
 require("whatwg-fetch");
 require("indexeddbshim");
 require("./asset-symbols/symbols.js");
 require("./language-dropdown/flags.js");
 
-import locales from "assets/locales";
-for (let locale of locales) {
-    require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
-}
+// import locales from "assets/locales";
+// for (let locale of locales) {
+//   require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
+// }
diff --git a/app/assets/stylesheets/components/_footer.scss b/app/assets/stylesheets/components/_footer.scss
@@ -10,7 +10,7 @@
     .nodes-list .api-status {
         padding-top: 15px;
         padding-bottom: 15px;
-        a { 
+        a {
             float: right;
             position: relative;
             top: 2px;

diff --git a/app/assets/stylesheets/vendors/_all.scss b/app/assets/stylesheets/vendors/_all.scss
@@ -6,3 +6,4 @@
 @import "introjs-light-theme";
 @import "introjs-midnight-theme";
 @import "~react-datepicker2/dist/react-datepicker2.css";
+@import "~react-sticky-table/dist/react-sticky-table.css";
diff --git a/app/components/DepositWithdraw/openledger/OpenLedgerFiatTransactionHistory.jsx b/app/components/DepositWithdraw/openledger/OpenLedgerFiatTransactionHistory.jsx
@@ -5,8 +5,8 @@ import Translate from "react-translate-component";
 
 class OpenLedgerFiatTransactionHistory extends React.Component {
     static propTypes = {
-        rpc_url:               React.PropTypes.string,
-        account: ChainTypes.ChainAccount,
+        rpc_url: React.PropTypes.string,
+        account: ChainTypes.ChainAccount
     };
 
     constructor(props) {
@@ -21,50 +21,50 @@ class OpenLedgerFiatTransactionHistory extends React.Component {
 
     onShowOpenLedgerTransactionHistory() {
         let json_rpc_request = {
-            "jsonrpc": "2.0",
-            "method": "getRequestsList",
-            "params": {
-                "bitsharesAccountName": this.props.account.get('name')
+            jsonrpc: "2.0",
+            method: "getRequestsList",
+            params: {
+                bitsharesAccountName: this.props.account.get("name")
             },
-            "id": 1
+            id: 1
         };
-        let get_transaction_history_promise = fetch(this.props.rpc_url, { 
+        let get_transaction_history_promise = fetch(this.props.rpc_url, {
             method: "POST",
             headers: new Headers({
-                "Accept": "application/json",
-                "content-type":"application/x-www-form-urlencoded"
+                Accept: "application/json",
+                "content-type": "application/x-www-form-urlencoded"
             }),
-            body: "rq=" + encodeURIComponent(JSON.stringify(json_rpc_request)) 
-        })
-        .then(response => response.json());
+            body: "rq=" + encodeURIComponent(JSON.stringify(json_rpc_request))
+        }).then(response => response.json());
 
-        get_transaction_history_promise.then((json_response) => {
-            if ("result" in json_response) {
+        get_transaction_history_promise
+            .then(json_response => {
+                if ("result" in json_response) {
+                    this.setState({
+                        current_status: "loaded",
+                        withdrawals: json_response.result.withdrawals,
+                        deposits: json_response.result.deposits,
+                        error: null
+                    });
+                } else if (
+                    "error" in json_response &&
+                    "message" in json_response.error
+                )
+                    throw json_repsonse.error.message;
+                else throw "Unexpected response";
+            })
+            .catch(error => {
                 this.setState({
-                    current_status: "loaded",
-                    withdrawals: json_response.result.withdrawals,
-                    deposits: json_response.result.deposits,
-                    error: null
+                    current_status: "error",
+                    withdrawals: null,
+                    deposits: null,
+                    error: "Error getting transaction history: " + error
                 });
-            }
-            else if ("error" in json_response && "message" in json_response.error)
-                throw json_repsonse.error.message;
-            else
-                throw "Unexpected response";
-        })
-        .catch((error) => {
-            this.setState({
-                current_status: "error",
-                withdrawals: null,
-                deposits: null,
-                error: "Error getting transaction history: " + error
             });
-        });
     }
 
     render() {
-        if( !this.props.account )
-            return null;
+        if (!this.props.account) return null;
 
         let openledger_withdrawal_history_fragment = null;
         if (this.state.current_status === "loaded") {
@@ -73,25 +73,35 @@ class OpenLedgerFiatTransactionHistory extends React.Component {
                 for (var i = 0; i < this.state.withdrawals.length; ++i)
                     openledger_withdrawal_history_rows.push(
                         <tr>
-                            <td>{this.state.withdrawals[i].amount} {this.state.withdrawals[i].currency}</td>
+                            <td>
+                                {this.state.withdrawals[i].amount}{" "}
+                                {this.state.withdrawals[i].currency}
+                            </td>
                             <td>{this.state.withdrawals[i].status}</td>
                         </tr>
                     );
-                openledger_withdrawal_history_fragment = 
+                openledger_withdrawal_history_fragment = (
                     <table className="table">
                         <thead>
                             <tr>
-                                <th><Translate content="openledger.withdraw_amount" /></th>
-                                <th><Translate content="openledger.status" /></th>
+                                <th>
+                                    <Translate content="openledger.withdraw_amount" />
+                                </th>
+                                <th>
+                                    <Translate content="openledger.status" />
+                                </th>
                             </tr>
                         </thead>
-                        <tbody>
-                            { openledger_withdrawal_history_rows }
-                        </tbody>
-                    </table>;
-            }
-            else
-                openledger_withdrawal_history_fragment = <Translate component="p" content="openledger.withdraw_none" />;
+                        <tbody>{openledger_withdrawal_history_rows}</tbody>
+                    </table>
+                );
+            } else
+                openledger_withdrawal_history_fragment = (
+                    <Translate
+                        component="p"
+                        content="openledger.withdraw_none"
+                    />
+                );
         }
 
         let openledger_deposit_history_fragment = null;
@@ -101,66 +111,112 @@ class OpenLedgerFiatTransactionHistory extends React.Component {
                 for (var i = 0; i < this.state.deposits.length; ++i)
                     openledger_deposit_history_rows.push(
                         <tr>
-                            <td>{this.state.deposits[i].amount} {this.state.deposits[i].currency}</td>
-                            <td><a href={this.state.deposits[i].link} rel="noopener noreferrer" target="_blank">link</a></td>
+                            <td>
+                                {this.state.deposits[i].amount}{" "}
+                                {this.state.deposits[i].currency}
+                            </td>
+                            <td>
+                                <a
+                                    href={this.state.deposits[i].link}
+                                    rel="noopener noreferrer"
+                                    target="_blank"
+                                >
+                                    link
+                                </a>
+                            </td>
                             <td>{this.state.deposits[i].status}</td>
                         </tr>
                     );
-                openledger_deposit_history_fragment = 
+                openledger_deposit_history_fragment = (
                     <table className="table">
                         <thead>
                             <tr>
-                                <th><Translate content="openledger.deposit_amount" /></th>
-                                <th><Translate content="openledger.deposit_details" /></th>
-                                <th><Translate content="openledger.status" /></th>
+                                <th>
+                                    <Translate content="openledger.deposit_amount" />
+                                </th>
+                                <th>
+                                    <Translate content="openledger.deposit_details" />
+                                </th>
+                                <th>
+                                    <Translate content="openledger.status" />
+                                </th>
                             </tr>
                         </thead>
-                        <tbody>
-                            { openledger_deposit_history_rows }
-                        </tbody>
-                    </table>;
-            }
-            else
-                openledger_deposit_history_fragment = <Translate component="p" content="openledger.deposit_none" />;
+                        <tbody>{openledger_deposit_history_rows}</tbody>
+                    </table>
+                );
+            } else
+                openledger_deposit_history_fragment = (
+                    <Translate
+                        component="p"
+                        content="openledger.deposit_none"
+                    />
+                );
         }
 
         let openledger_transaction_history_fragment = null;
 
-        if (this.state.current_status === "error" )
-            openledger_transaction_history_fragment = 
+        if (this.state.current_status === "error")
+            openledger_transaction_history_fragment = (
                 <div className="content-block">
-                    <button className={"button outline"} onClick={this.onShowOpenLedgerTransactionHistory.bind(this)}>
+                    <button
+                        className={"button outline"}
+                        onClick={this.onShowOpenLedgerTransactionHistory.bind(
+                            this
+                        )}
+                    >
                         <Translate content="openledger.retry" />
                     </button>
                     <p>{this.state.error}</p>
-                </div>;
-        else if (this.state.current_status === "loading" )
-            openledger_transaction_history_fragment = 
+                </div>
+            );
+        else if (this.state.current_status === "loading")
+            openledger_transaction_history_fragment = (
                 <div className="content-block">
-                    <button className={"button outline"} onClick={this.onShowOpenLedgerTransactionHistory.bind(this)} disabled="true">
+                    <button
+                        className={"button outline"}
+                        onClick={this.onShowOpenLedgerTransactionHistory.bind(
+                            this
+                        )}
+                        disabled="true"
+                    >
                         <Translate content="openledger.show_transaction_history" />
                     </button>
                     <Translate component="p" content="openledger.loading" />
                 </div>
-            ;
+            );
         else {
-            let button_label = this.state.current_status === "never_loaded" 
-                ? <Translate content="openledger.show_transaction_history" /> 
-                : <Translate content="openledger.refresh_transaction_history" />;
-            openledger_transaction_history_fragment = 
+            let button_label =
+                this.state.current_status === "never_loaded" ? (
+                    <Translate content="openledger.show_transaction_history" />
+                ) : (
+                    <Translate content="openledger.refresh_transaction_history" />
+                );
+            openledger_transaction_history_fragment = (
                 <div className="content-block">
-                    <br/>
-                    <Translate component="h4" content="openledger.header_transaction_history" />
-                    <button className={"button outline"} onClick={this.onShowOpenLedgerTransactionHistory.bind(this)}> 
-                        {button_label} 
+                    <br />
+                    <Translate
+                        component="h4"
+                        content="openledger.header_transaction_history"
+                    />
+                    <button
+                        className={"button outline"}
+                        onClick={this.onShowOpenLedgerTransactionHistory.bind(
+                            this
+                        )}
+                    >
+                        {button_label}
                     </button>
                     {openledger_withdrawal_history_fragment}
                     {openledger_deposit_history_fragment}
-                </div>;
+                </div>
+            );
         }
 
         return openledger_transaction_history_fragment;
     }
-}; // OpenLedgerFiatTransactionHistory
+} // OpenLedgerFiatTransactionHistory
 
-export default BindToChainState(OpenLedgerFiatTransactionHistory, {keep_updating:true});
+export default BindToChainState(OpenLedgerFiatTransactionHistory, {
+    keep_updating: true
+});
diff --git a/app/components/Exchange/Exchange.jsx b/app/components/Exchange/Exchange.jsx
@@ -202,6 +202,7 @@ class Exchange extends React.Component {
             buySellTop: ws.get("buySellTop", true),
             buyFeeAssetIdx: ws.get("buyFeeAssetIdx", 0),
             sellFeeAssetIdx: ws.get("sellFeeAssetIdx", 0),
+            feeStatus: {},
             height: window.innerHeight,
             width: window.innerWidth,
             chartHeight: ws.get("chartHeight", 600),
@@ -1309,7 +1310,7 @@ class Exchange extends React.Component {
         }
 
         // Fees
-        if (!coreAsset || !this.state.feeStatus) {
+        if (!coreAsset || !Object.keys(this.state.feeStatus).length) {
             return null;
         }
 

diff --git a/app/components/Exchange/OrderBook.jsx b/app/components/Exchange/OrderBook.jsx
@@ -10,7 +10,6 @@ import TransitionWrapper from "../Utility/TransitionWrapper";
 import AssetName from "../Utility/AssetName";
 import {StickyTable} from "react-sticky-table";
 import Icon from "../Icon/Icon";
-import "react-sticky-table/dist/react-sticky-table.css";
 
 class OrderBookRowVertical extends React.Component {
     shouldComponentUpdate(np) {