Diet for assets (#50)

* Reduce bundle size by using webpack

* Update dev config

* Fix dev build

* Drop parcel bundler

* Reduce bundle size by another 100Kb

* Replace bignumber.js with bn.js

.babelrc

@@ -11,6 +11,7 @@
     ]
   ],
   "plugins": [
+    ["import", { "libraryName": "antd", "style": true }],
     "transform-decorators-legacy",
     ["transform-class-properties", { "loose": true }],
     [

.gitignore

@@ -1,4 +1,5 @@
 .cache
+.cache-loader
 dist
 node_modules
 stats.json

dummies/web3-eth-ens.js

@@ -0,0 +1,5 @@
+/*
+ * Way too heavy dependency and we don't using it
+ */
+
+module.exports = class ENS {};

package.json

@@ -5,10 +5,9 @@
   "license": "GPLv3",
   "private": true,
   "scripts": {
-    "start": "./node_modules/.bin/parcel src/index.html --open",
-    "build": "rm -rf dist/ && parcel build src/index.html",
-    "start:webpack": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js",
-    "build:webpack": "rm -rf dist/ && webpack-cli --config webpack.config.prod.js",
+    "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js",
+    "build": "rm -rf dist/ && webpack-cli --config webpack.config.prod.js",
+    "stats": "rm -rf dist/ && webpack-cli --config webpack.config.prod.js --json > stats.json",
     "precommit": "lint-staged",
     "deploy:dev": "aws s3 sync ./dist s3://stake-dev.parseclabs.org/ --acl public-read",
     "deploy:testnet": "aws s3 sync ./dist s3://stake-testnet.parseclabs.org/ --acl public-read",
@@ -43,6 +42,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "babel-runtime": "^6.26.0",
+    "cache-loader": "^1.2.2",
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.0",
     "eslint": "^4.19.1",
@@ -61,11 +61,11 @@
     "less": "3.0.0",
     "less-loader": "^4.1.0",
     "lint-staged": "^7.0.5",
-    "parcel-bundler": "^1.9.7",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.12.1",
     "style-loader": "^0.22.1",
+    "thread-loader": "^1.2.0",
     "ts-loader": "^4.5.0",
     "typescript": "^3.0.1",
     "uglifyjs-webpack-plugin": "^1.3.0",
@@ -78,7 +78,6 @@
     "@types/web3": "^1.0.6",
     "antd": "3.10.1",
     "autobind-decorator": "^2.1.0",
-    "bignumber.js": "4.0.2",
     "bn.js": "^4.11.8",
     "ethereumjs-util": "^5.2.0",
     "mobx": "^5.0.3",

src/components/amountInput.js

@@ -108,7 +108,7 @@ export default class AmountInput extends React.Component {
                 notFoundContent="No tokens"
                 allowClear
               >
-                {balance.map(id => (
+                {(balance || []).map(id => (
                   <Select.Option key={id} value={id}>
                     {id}
                   </Select.Option>

src/components/app.js

@@ -5,7 +5,7 @@
  * found in the LICENSE file in the root directory of this source tree.
  */
 
-import 'antd/dist/antd.css';
+// import 'antd/dist/antd.css';
 
 import React from 'react';
 import { observer, inject } from 'mobx-react';

src/components/stakeForm.js

@@ -3,7 +3,6 @@ import { observer } from 'mobx-react';
 import { observable, computed } from 'mobx';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'antd';
-import BigNumber from 'bignumber.js';
 import autobind from 'autobind-decorator';
 
 const fieldValue = v => String(v >= 0 ? v : '');
@@ -39,9 +38,8 @@ class StakeForm extends React.Component {
   @autobind
   handleUpdate() {
     const { minValue, onChange } = this.props;
-    const minStake = new BigNumber(minValue);
     const zero = this.value === 0 || this.value === '0';
-    onChange(zero ? 0 : Math.max(Number(minStake), Number(this.value)));
+    onChange(zero ? 0 : Math.max(Number(minValue), Number(this.value)));
   }
 
   @autobind

src/components/transferForm.js

@@ -10,17 +10,20 @@ import AmountInput from './amountInput';
 @inject('tokens')
 @observer
 class TransferForm extends React.Component {
-  get valueError() {
+  get token() {
     const { tokens, color } = this.props;
-    const token = tokens.tokenForColor(color);
+    return tokens && tokens.tokenForColor(color);
+  }
 
+  get valueError() {
     if (!this.value) {
       return 'Required';
     }
 
-    if (!token.isNft) {
+    if (!this.token.isNft) {
       const maxValue =
-        token.plasmaBalance && token.toTokens(token.plasmaBalance);
+        this.token.plasmaBalance &&
+        this.token.toTokens(this.token.plasmaBalance);
       if (maxValue && Number(this.value) > maxValue) {
         return `Should <= ${maxValue}`;
       }
@@ -50,7 +53,7 @@ class TransferForm extends React.Component {
   }
 
   @observable
-  value = 0;
+  value = this.token.isNft ? '' : 0;
 
   @observable
   receiver = '';
@@ -86,9 +89,7 @@ class TransferForm extends React.Component {
 
   @autobind
   handleBlur() {
-    const { tokens, color } = this.props;
-    const token = tokens.tokenForColor(color);
-    if (!token.isNft) {
+    if (!this.token.isNft) {
       this.value = Math.max(0, Number(this.value));
     }
   }
@@ -110,9 +111,7 @@ class TransferForm extends React.Component {
       return null;
     }
 
-    const token = tokens.tokenForColor(color);
-
-    if (!token || !token.ready) {
+    if (!this.token || !this.token.ready) {
       return null;
     }
 

src/components/txNotification/index.tsx

@@ -5,29 +5,45 @@
  * found in the LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { notification, Spin, Icon } from 'antd';
+
+import 'antd/lib/spin/style';
+import * as Spin from 'antd/lib/spin';
+import 'antd/lib/icon/style';
+import * as Icon from 'antd/lib/icon';
+import 'antd/lib/notification/style';
+import * as notification from 'antd/lib/notification';
+
 import { TxStatus } from './types';
 
+/*
+ * Because of bad typings in antd
+ */
+const antd = {
+  Icon: Icon as any,
+  Spin: Spin as any,
+  notification: notification as any,
+};
+
 const statusDetails = {
   [TxStatus.CREATED]: {
     text: 'Waiting for signature..',
-    icon: <Icon type="key" />,
+    icon: <antd.Icon type="key" />,
   },
-  [TxStatus.INFLIGHT]: { text: 'Mining..', icon: <Spin /> },
+  [TxStatus.INFLIGHT]: { text: 'Mining..', icon: <antd.Spin /> },
   [TxStatus.SUCCEED]: {
     text: 'Success',
-    icon: <Icon type="check-circle" style={{ color: 'green' }} />,
+    icon: <antd.Icon type="check-circle" style={{ color: 'green' }} />,
   },
   [TxStatus.FAILED]: {
     text: 'Transaction failed',
-    icon: <Icon type="close-circle" style={{ color: 'red' }} />,
+    icon: <antd.Icon type="close-circle" style={{ color: 'red' }} />,
   },
   [TxStatus.CANCELLED]: {
     text: 'Cancelled',
-    icon: <Icon type="close-circle-o" style={{ color: 'red' }} />,
+    icon: <antd.Icon type="close-circle-o" style={{ color: 'red' }} />,
   },
 };
 
@@ -36,7 +52,7 @@ const TxNotification: React.SFC<{
 }> = ({ transactions }) => {
   transactions.map.observe(txChange => {
     if (txChange.type === 'delete') {
-      notification.close(txChange.name);
+      antd.notification.close(txChange.name);
       return;
     }
 
@@ -57,7 +73,7 @@ const TxNotification: React.SFC<{
       description: description,
     };
 
-    notification.open(msg);
+    antd.notification.open(msg);
   });
   return null;
 };

src/icons.js

@@ -0,0 +1,24 @@
+export {
+  default as BarsOutline,
+} from '@ant-design/icons/lib/outline/BarsOutline';
+export {
+  default as KeyOutline,
+} from '@ant-design/icons/lib/outline/KeyOutline';
+export {
+  default as CheckCircleOutline,
+} from '@ant-design/icons/lib/outline/CheckCircleOutline';
+export {
+  default as DownOutline,
+} from '@ant-design/icons/lib/outline/DownOutline';
+export {
+  default as TrophyOutline,
+} from '@ant-design/icons/lib/outline/TrophyOutline';
+export {
+  default as CloseCircleOutline,
+} from '@ant-design/icons/lib/outline/CloseCircleOutline';
+export {
+  default as CloseCircleTwoTone,
+} from '@ant-design/icons/lib/twotone/CloseCircleTwoTone';
+export {
+  default as CloseCircleFill,
+} from '@ant-design/icons/lib/fill/CloseCircleFill';

src/routes/slots.js

@@ -11,7 +11,6 @@ import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import ethUtil from 'ethereumjs-util';
 import { Form, Input, Divider } from 'antd';
-import BigNumber from 'bignumber.js';
 
 import Web3SubmitWarning from '../components/web3SubmitWarning';
 import StakeForm from '../components/stakeForm';
@@ -188,9 +187,7 @@ export default class Slots extends React.Component {
               <tr>
                 <th style={formCellStyle} />
                 {bridge.slots.map((slot, i) => {
-                  const minStake = BigNumber.max(slot.stake, slot.newStake).mul(
-                    1.05
-                  );
+                  const minStake = Math.max(slot.stake, slot.newStake) * 1.05;
                   const minValue = psc.toTokens(minStake);
                   const ownStake = addrCmp(slot.owner, account.address || '')
                     ? minValue

src/stores/bridge.ts

@@ -7,7 +7,6 @@
 
 import { observable, action, reaction, IObservableArray } from 'mobx';
 import autobind from 'autobind-decorator';
-import BigNumber from 'bignumber.js';
 import Contract from 'web3/eth/contract';
 import { bridge as bridgeAbi } from '../utils/abis';
 
@@ -48,12 +47,12 @@ const readSlots = (bridge: Contract) => {
           new Slot({
             eventCounter,
             owner,
-            stake: new BigNumber(stake),
+            stake: Number(stake),
             signer,
             tendermint,
             activationEpoch: Number(activationEpoch),
             newOwner,
-            newStake: new BigNumber(newStake),
+            newStake: Number(newStake),
             newSigner,
             newTendermint,
           })

src/stores/token.ts

@@ -16,7 +16,7 @@ import {
 import { helpers, Tx, Input, Output } from 'parsec-lib';
 import Web3PromiEvent from 'web3-core-promievent';
 import autobind from 'autobind-decorator';
-import BigNumber from 'bignumber.js';
+import BN = require('bn.js');
 import Contract from 'web3/eth/contract';
 import { EventLog } from 'web3/types';
 import { erc20, erc721 } from '../utils/abis';
@@ -124,7 +124,7 @@ export default class Token extends ContractStore {
   public toCents(tokenValue: number): number {
     if (this.isNft) return tokenValue;
 
-    return new BigNumber(tokenValue).mul(10 ** this.decimals).toNumber();
+    return tokenValue * 10 ** this.decimals;
   }
 
   /**
@@ -135,7 +135,7 @@ export default class Token extends ContractStore {
   public toTokens(tokenCentsValue: number): number {
     if (this.isNft) return tokenCentsValue;
 
-    return new BigNumber(tokenCentsValue).div(10 ** this.decimals).toNumber();
+    return tokenCentsValue / 10 ** this.decimals;
   }
 
   public transfer(to: string, amount: number): Promise<any> {
@@ -271,7 +271,7 @@ export default class Token extends ContractStore {
   private allowanceOrTokenId(valueOrTokenId: number) {
     if (this.isNft) return valueOrTokenId;
 
-    return `0x${new BigNumber(2).pow(255).toString(16)}`;
+    return `0x${new BN(2, 10).pow(new BN(255, 10)).toString(16)}`;
   }
 
   private hasEnoughAllowance(spender: string, value: number): Promise<Boolean> {

src/stores/unspents.ts

@@ -9,7 +9,7 @@ import { observable, reaction, computed } from 'mobx';
 import { Unspent, Tx, Period, Block, Input, Output, Type } from 'parsec-lib';
 import Eth from 'web3/eth/index';
 import { Transaction } from 'web3/eth/types';
-import ethUtil from 'ethereumjs-util';
+import { bufferToHex } from 'ethereumjs-util';
 
 import Bridge from './bridge';
 import Account from './account';
@@ -97,7 +97,7 @@ export default class Unspents {
             .then(unspent => {
               return Promise.all(
                 unspent.map(u =>
-                  eth.getTransaction(ethUtil.bufferToHex(u.outpoint.hash))
+                  eth.getTransaction(bufferToHex(u.outpoint.hash))
                 )
               ).then(transactions => {
                 transactions.forEach((tx, i) => {

src/utils/getParsecWeb3.js

@@ -14,9 +14,7 @@ let web3;
 export default () => {
   if (!web3) {
     const node = PARSEC_NODES[process.env.PARSEC_NODE || DEFAULT_PARSEC_NODE];
-    web3 = new Web3();
-    web3.setProvider(new web3.providers.HttpProvider(node));
-    web3 = helpers.extendWeb3(web3);
+    web3 = helpers.extendWeb3(new Web3(new Web3.providers.HttpProvider(node)));
   }
   return web3;
 };

src/utils/getWeb3.js

@@ -14,7 +14,7 @@ let injectedWeb3;
 export default (injected = false) => {
   if (!injected && !web3) {
     const network = NETWORKS[process.env.NETWORK_ID || DEFAULT_NETWORK];
-    web3 = new Web3(network.provider);
+    web3 = new Web3(new Web3.providers.HttpProvider(network.provider));
   }
 
   if (injected && !injectedWeb3) {