Fix bitshares#1343: Reduce bundle size by ~30%

bangzi1001 · Mar 19, 2018 · f6de8cc · f6de8cc
1 parent bbc7833
commit f6de8cc
Show file tree

Hide file tree

Showing 19 changed files with 1,178 additions and 775 deletions.
diff --git a/.babelrc b/.babelrc
@@ -5,7 +5,8 @@
         "react"
     ],
     "plugins": [
-      "react-hot-loader/babel"
+      "react-hot-loader/babel",
+      "lodash"
     ],
     "env": {
         "test": {

diff --git a/app/assets/index-dev.html b/app/assets/index-dev.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width"/>
     <meta name="format-detection" content="telephone=no">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data: https://www.transwiser.com;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/ 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data: https://www.transwiser.com;">
     <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>-->
     <title>BitShares</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico">

diff --git a/app/assets/index-electron.html b/app/assets/index-electron.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width"/>
     <meta name="format-detection" content="telephone=no">
     <title>BitShares</title>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://bitshares.openledger.info; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data: https://www.transwiser.com;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/ 'self' 'unsafe-eval' 'unsafe-inline' https://bitshares.openledger.info; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data: https://www.transwiser.com;">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="app.css">
     <style>

diff --git a/app/assets/index.html b/app/assets/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width"/>
     <meta name="format-detection" content="telephone=no">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://bitshares.openledger.info; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data:;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/ 'self' 'unsafe-eval' 'unsafe-inline' https://bitshares.openledger.info; style-src 'self' 'unsafe-inline'; connect-src 'self' *; font-src 'self' data:; img-src 'self' data:;">
     <title>BitShares</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="app.css">

diff --git a/app/assets/loader-dev.js b/app/assets/loader-dev.js
@@ -2,13 +2,13 @@ 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("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`);
+    require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
 }
diff --git a/app/assets/loader.js b/app/assets/loader.js
@@ -1,14 +1,16 @@
 require("./stylesheets/app.scss");
-require("file-loader?name=index.html!./" + ((__ELECTRON__ || __HASH_HISTORY__) ? "index-electron" : "index") + ".html");
+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("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`);
+    require(`file-loader?name=[name].[ext]!./locales/locale-${locale}.json`);
 }
diff --git a/app/assets/locales.js b/app/assets/locales.js
@@ -1,3 +1,3 @@
 const locales = ["de", "es", "fr", "ko", "it", "tr", "ru", "zh", "ja"];
 
-export default locales;
+module.exports = locales;
diff --git a/app/components/BrowserNotifications/BrowserNotifications.jsx b/app/components/BrowserNotifications/BrowserNotifications.jsx
@@ -160,7 +160,7 @@ class BrowserNotifications extends React.Component {
 
     _getAccountNameById(accountId) {
         const account = ChainStore.getAccount(accountId);
-
+        if (!account) return "";
         return account.get("name");
     }
 

diff --git a/app/components/Exchange/BuySell.jsx b/app/components/Exchange/BuySell.jsx
@@ -15,7 +15,7 @@ import SimpleDepositBlocktradesBridge from "../Dashboard/SimpleDepositBlocktrade
 import {Asset} from "common/MarketClasses";
 import ExchangeInput from "./ExchangeInput";
 import assetUtils from "common/asset_utils";
-import DatePicker from "react-datepicker2";
+import DatePicker from "react-datepicker2/src/";
 import moment from "moment";
 import Icon from "../Icon/Icon";
 

diff --git a/app/components/Forms/PasswordInput.jsx b/app/components/Forms/PasswordInput.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import {PropTypes, Component} from "react";
 import cname from "classnames";
 import Translate from "react-translate-component";
-import pw from "zxcvbn";
+import zxcvbnAsync from "zxcvbn-async";
 
 class PasswordInput extends Component {
     static propTypes = {
@@ -71,6 +71,27 @@ class PasswordInput extends Component {
         const doesnt_match = this.props.confirmation
             ? confirmation && password !== confirmation
             : false;
+
+        let strength = 0,
+            score;
+        if (this.props.checkStrength) {
+            if (this.state.value.length > 100) {
+                strength = {score: 4};
+            } else {
+                let zxcvbn = zxcvbnAsync.load({sync: true});
+                strength = zxcvbn(this.state.value || "");
+            }
+            /* Require a length of passwordLength + 50% for the max score */
+            score = Math.min(
+                5,
+                strength.score +
+                    Math.floor(
+                        this.state.value.length /
+                            (this.props.passwordLength * 1.5)
+                    )
+            );
+        }
+
         let state = {
             valid:
                 !this.state.error &&
@@ -79,6 +100,7 @@ class PasswordInput extends Component {
                 confirmation &&
                 password.length >= this.props.passwordLength,
             value: password,
+            score,
             doesnt_match
         };
         if (this.props.onChange) this.props.onChange(state);
@@ -90,6 +112,7 @@ class PasswordInput extends Component {
     }
 
     render() {
+        let {score} = this.state;
         let password_error = null,
             confirmation_error = null;
         if (this.state.wrong || this.props.wrongPassword)
@@ -137,24 +160,6 @@ class PasswordInput extends Component {
             confirmMatch = true;
         }
 
-        let strength = 0,
-            score;
-        if (this.props.checkStrength) {
-            strength =
-                this.state.value.length > 100
-                    ? {score: 4}
-                    : pw(this.state.value || "");
-            /* Require a length of passwordLength + 50% for the max score */
-            score = Math.min(
-                5,
-                strength.score +
-                    Math.floor(
-                        this.state.value.length /
-                            (this.props.passwordLength * 1.5)
-                    )
-            );
-        }
-
         return (
             <div className="account-selector">
                 <div className={password_class_name}>

diff --git a/app/components/Layout/Header.jsx b/app/components/Layout/Header.jsx
@@ -24,7 +24,7 @@ import {Apis} from "bitsharesjs-ws";
 import notify from "actions/NotificationActions";
 // import IntlActions from "actions/IntlActions";
 import AccountImage from "../Account/AccountImage";
-import {ChainStore} from "bitsharesjs";
+import {ChainStore} from "bitsharesjs/es";
 import WithdrawModal from "../Modal/WithdrawModalNew";
 import {List} from "immutable";
 

diff --git a/app/components/News.jsx b/app/components/News.jsx
@@ -1,69 +1,116 @@
 import React from "react";
 import counterpart from "counterpart";
-import steem from "steem";
+import {api} from "steem";
 import Translate from "react-translate-component";
 
 import LoadingIndicator from "./LoadingIndicator";
 
-const query = {tag: "bitshares.fdn",limit: 20};
+const query = {tag: "bitshares.fdn", limit: 20};
 
 const alignRight = {textAlign: "right"};
 const alignLeft = {textAlign: "left"};
 const rowHeight = {height: "2rem"};
 const bodyCell = {padding: "0.5rem 1rem"};
-const headerCell = {padding: "0.85rem 1rem"}
+const headerCell = {padding: "0.85rem 1rem"};
 
-const leftCell = { ...alignLeft, ...bodyCell };
-const rightCell = { ...alignRight, ...bodyCell };
+const leftCell = {...alignLeft, ...bodyCell};
+const rightCell = {...alignRight, ...bodyCell};
 
-const leftCellHeader = { ...alignLeft, ...headerCell };
-const rightCellHeader = { ...alignRight, ...headerCell };
+const leftCellHeader = {...alignLeft, ...headerCell};
+const rightCellHeader = {...alignRight, ...headerCell};
 
-const secondCol = { ...leftCell, width: "180px"};
+const secondCol = {...leftCell, width: "180px"};
 
 const SomethingWentWrong = () => (
-    <p><Translate content="news.errors.fetch" /></p>
+    <p>
+        <Translate content="news.errors.fetch" />
+    </p>
 );
 
-const ReusableLink = ({ data, url, isLink = false}) => (
+const ReusableLink = ({data, url, isLink = false}) => (
     <a
         href={`https://steemit.com${url}`}
         rel="noreferrer noopener"
         target="_blank"
         style={{display: "block"}}
         className={!isLink ? "primary-text" : ""}
-    >{data}</a>
+    >
+        {data}
+    </a>
 );
 
-const NewsTable = ({ data, width }) => {
+const NewsTable = ({data, width}) => {
     return (
-        <table className="table table-hover dashboard-table" style={{fontSize: "0.85rem"}}>
+        <table
+            className="table table-hover dashboard-table"
+            style={{fontSize: "0.85rem"}}
+        >
             <thead>
                 <tr>
-                    <th style={rightCellHeader}><Translate component="span" content="account.votes.line" /></th>
-                    <th style={leftCellHeader}><Translate component="span" content="explorer.block.date" /></th>
-                    <th style={leftCellHeader}><Translate component="span" content="news.subject" /></th>
-                    <th style={leftCellHeader}><Translate component="span" content="news.author" /></th>
+                    <th style={rightCellHeader}>
+                        <Translate
+                            component="span"
+                            content="account.votes.line"
+                        />
+                    </th>
+                    <th style={leftCellHeader}>
+                        <Translate
+                            component="span"
+                            content="explorer.block.date"
+                        />
+                    </th>
+                    <th style={leftCellHeader}>
+                        <Translate component="span" content="news.subject" />
+                    </th>
+                    <th style={leftCellHeader}>
+                        <Translate component="span" content="news.author" />
+                    </th>
                 </tr>
             </thead>
             <tbody>
                 {data.map((singleNews, iter) => {
-                    const theAuthor = singleNews.parentAuthor ? singleNews.parentAuthor : singleNews.author
-                    const formattedDate = counterpart.localize(new Date(singleNews.created));
-                    const smartTitle = (singleNews.title.length * 6) > (width-450)
-                        ? `${singleNews.title.slice(0, Math.floor(width-450)/6)}...`
-                        : singleNews.title
-                    return(
-                        <tr
-                            key={`${singleNews.title.slice(0,10)}${iter}`}
-                        >
-                            <td style={rightCell}><ReusableLink data={iter+1} url={singleNews.url}/></td>
-                            <td style={secondCol}><ReusableLink data={formattedDate} url={singleNews.url}/></td>
-                            <td style={leftCell}><ReusableLink data={smartTitle} url={singleNews.url} isLink/></td>
-                            <td style={leftCell}><ReusableLink data={theAuthor} url={singleNews.url}/></td>
+                    const theAuthor = singleNews.parentAuthor
+                        ? singleNews.parentAuthor
+                        : singleNews.author;
+                    const formattedDate = counterpart.localize(
+                        new Date(singleNews.created)
+                    );
+                    const smartTitle =
+                        singleNews.title.length * 6 > width - 450
+                            ? `${singleNews.title.slice(
+                                  0,
+                                  Math.floor(width - 450) / 6
+                              )}...`
+                            : singleNews.title;
+                    return (
+                        <tr key={`${singleNews.title.slice(0, 10)}${iter}`}>
+                            <td style={rightCell}>
+                                <ReusableLink
+                                    data={iter + 1}
+                                    url={singleNews.url}
+                                />
+                            </td>
+                            <td style={secondCol}>
+                                <ReusableLink
+                                    data={formattedDate}
+                                    url={singleNews.url}
+                                />
+                            </td>
+                            <td style={leftCell}>
+                                <ReusableLink
+                                    data={smartTitle}
+                                    url={singleNews.url}
+                                    isLink
+                                />
+                            </td>
+                            <td style={leftCell}>
+                                <ReusableLink
+                                    data={theAuthor}
+                                    url={singleNews.url}
+                                />
+                            </td>
                         </tr>
-
-                    )
+                    );
                 })}
             </tbody>
             <thead>
@@ -92,21 +139,22 @@ class News extends React.Component {
     }
 
     updateDimensions() {
-        this.setState({ width: window.innerWidth });
+        this.setState({width: window.innerWidth});
     }
 
     orderDiscussions(discussions) {
-        const orderedDiscussions = discussions
-            .sort((a, b) => (new Date(b.created) - new Date(a.created)))
-        this.setState({discussions: orderedDiscussions, isLoading: false})
+        const orderedDiscussions = discussions.sort(
+            (a, b) => new Date(b.created) - new Date(a.created)
+        );
+        this.setState({discussions: orderedDiscussions, isLoading: false});
     }
 
     componentDidMount() {
         this.updateDimensions();
         window.addEventListener("resize", this.updateDimensions);
-        steem.api.getDiscussionsByBlog(query, (err, discussions) => {
-            if (err) this.setState({isLoading: false, isWrong: true})
-            this.orderDiscussions(discussions)
+        api.getDiscussionsByBlog(query, (err, discussions) => {
+            if (err) this.setState({isLoading: false, isWrong: true});
+            this.orderDiscussions(discussions);
         });
     }
 
@@ -115,7 +163,7 @@ class News extends React.Component {
     }
 
     render() {
-        const { isLoading, isWrong, discussions, width } = this.state
+        const {isLoading, isWrong, discussions, width} = this.state;
 
         return (
             <div className="grid-block page-layout">
@@ -130,7 +178,13 @@ class News extends React.Component {
                             <div className="grid-block vertical">
                                 {isWrong && <SomethingWentWrong />}
                                 {isLoading ? <LoadingIndicator /> : null}
-                                {!isWrong && !isLoading && <NewsTable width={width} data={discussions}/>}
+                                {!isWrong &&
+                                    !isLoading && (
+                                        <NewsTable
+                                            width={width}
+                                            data={discussions}
+                                        />
+                                    )}
                             </div>
                         </div>
                     </div>