0xProject · DennisSimon · Mar 21, 2022 · Mar 21, 2022 · Mar 23, 2022 · Mar 23, 2022
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "resolutions": {
         "node-hid": "2.1.1",
         "scrypt": "github:barrysteyn/node-scrypt#fb60a8d",
-        "websocket": "github:frozeman/WebSocket-Node#browserifyCompatible"
+        "websocket": "github:frozeman/WebSocket-Node#browserifyCompatible",
+        "**/ethereumjs-common": "npm:@ethereumjs/common@^2.5.0"
     },
     "author": "Fabio Berger",
     "license": "Apache-2.0",
@@ -45,6 +46,7 @@
         "@0x/subproviders": "^6.6.1",
         "@0x/utils": "^6.4.4",
         "@0x/web3-wrapper": "^7.0.2",
+        "@loadable/component": "^5.15.2",
         "@reach/dialog": "^0.11.2",
         "@reach/tabs": "^0.1.6",
         "@tryghost/admin-api": "^1.4.2",
@@ -80,8 +82,10 @@
         "graphql": "^15.5.1",
         "graphql-request": "^3.5.0",
         "is-mobile": "^0.2.2",
+        "jscodeshift": "^0.13.1",
         "less": "^2.7.2",
         "lodash": "^4.17.11",
+        "lodash-es": "^4.17.21",
         "lottie-web": "^5.6.2",
         "marked": "^2.0.0",
         "material-ui": "^0.20.0",
@@ -152,7 +156,9 @@
         "@types/find-versions": "^2.0.0",
         "@types/is-mobile": "0.3.0",
         "@types/jest": "^24.0.25",
+        "@types/loadable__component": "^5.13.4",
         "@types/lodash": "4.14.104",
+        "@types/lodash-es": "^4.17.6",
         "@types/marked": "^1.2.2",
         "@types/material-ui": "^0.20.0",
         "@types/mersenne-twister": "^1.1.2",
@@ -184,6 +190,7 @@
         "eslint-plugin-react-hooks": "^2.3.0",
         "extend": "^3.0.2",
         "glob": "^7.1.4",
+        "html-webpack-plugin": "4",
         "husky": "^3.0.5",
         "jest": "^24.9.0",
         "jest-transform-stub": "^2.0.0",
@@ -205,6 +212,7 @@
         "to-vfile": "^6.0.0",
         "ts-jest": "^24.2.0",
         "ts-node": "^8.3.0",
+        "tslib": "^2.3.1",
         "tslint": "5.11.0",
         "tslint-config-0xproject": "^0.0.2",
         "typescript": "^3.8.3",
@@ -214,6 +222,7 @@
         "unist-util-visit": "^2.0.0",
         "unist-util-visit-parents": "^3.0.0",
         "webpack": "^4.39.2",
+        "webpack-bundle-analyzer": "^4.5.0",
         "webpack-cli": "3.3.7",
         "webpack-dev-server": "^3.8.0",
         "yargs": "^10.0.3"

diff --git a/stats.json b/stats.json
@@ -0,0 +1,20 @@
+yarn run v1.22.17
+$ /Users/dennis/projects/website/node_modules/.bin/webpack --profile --json
+i ｢atl｣: Mode:  production
+i ｢atl｣: Plugin Count:  3
+ℹ ｢atl｣: Using [email protected] from typescript
+ℹ ｢atl｣: Using tsconfig.json from /Users/dennis/projects/website/tsconfig.json
+
+<--- Last few GCs --->
+ll[31489:0x102e8d000]   580702 ms: Mark-sweep 2047.2 (2063.7) -> 2046.3 (2061.0) MB, 1524.6 / 0.0 ms  (+ 119.2 ms in 23 steps since start of marking, biggest step 8.3 ms, walltime since start of marking 1648 ms) (average mu = 0.118, current mu = 0.003) allo[31489:0x102e8d000]   582201 ms: Mark-sweep 2048.2 (2061.0) -> 2048.1 (2063.0) MB, 1375.7 / 0.0 ms  (+ 118.1 ms in 27 steps since start of marking, biggest step 8.2 ms, walltime since start of marking 1499 ms) (average mu = 0.065, current mu = 0.003) allo
+
+<--- JS stacktrace --->
+
+==== JS stack trace =========================================
+
+    0: ExitFrame [pc: 0x100a04179]
+Security context: 0x30d6343408d1 <JSObject>
+    1: addMappingWithCode [0x30d636a43c29] [/Users/dennis/projects/website/node_modules/source-map/lib/source-node.js:~150] [pc=0x158e68328dd2](this=0x30d6dc440a31 <JSGlobal Object>,0x30d6b5d6ff91 <Object map = 0x30d606828709>,0x30d624bdd471 <String[6]: 13134:>)
+    2: /* anonymous */ [0x30d6ce8fbcc9] [/Users/dennis/projects/website/node_modules/source-map/lib/...
+
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
diff --git a/ts/blockchain.ts b/ts/blockchain.ts
@@ -30,7 +30,7 @@ import {
     TransactionReceiptWithDecodedLogs,
     ZeroExProvider,
 } from 'ethereum-types';
-import * as _ from 'lodash';
+import { each, find, includes, intersection, isEmpty, map, parseInt as lodashParseInt, values } from 'lodash-es';
 import * as moment from 'moment';
 import * as React from 'react';
 import contract from 'truffle-contract';
@@ -122,12 +122,9 @@ export class Blockchain {
             };
             const ledgerSubprovider = new LedgerSubprovider(ledgerWalletConfigs);
             provider.addProvider(ledgerSubprovider);
-            const rpcSubproviders = _.map(
-                configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists],
-                (publicNodeUrl) => {
-                    return new RPCSubprovider(publicNodeUrl);
-                },
-            );
+            const rpcSubproviders = map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists], (publicNodeUrl) => {
+                return new RPCSubprovider(publicNodeUrl);
+            });
             provider.addProvider(new RedundantSubprovider(rpcSubproviders));
             providerUtils.startProviderEngine(provider);
             return [provider, ledgerSubprovider];
@@ -142,7 +139,7 @@ export class Blockchain {
                     ? new MetamaskSubprovider(injectedProviderIfExists)
                     : new SignerSubprovider(injectedProviderIfExists);
             provider.addProvider(signerSubprovider);
-            const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, (publicNodeUrl) => {
+            const rpcSubproviders = map(publicNodeUrlsIfExistsForNetworkId, (publicNodeUrl) => {
                 return new RPCSubprovider(publicNodeUrl);
             });
             provider.addProvider(new RedundantSubprovider(rpcSubproviders));
@@ -157,7 +154,7 @@ export class Blockchain {
             // injected into their browser.
             const provider = new Web3ProviderEngine();
             const networkId = constants.NETWORK_ID_MAINNET;
-            const rpcSubproviders = _.map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId], (publicNodeUrl) => {
+            const rpcSubproviders = map(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId], (publicNodeUrl) => {
                 return new RPCSubprovider(publicNodeUrl);
             });
             provider.addProvider(new RedundantSubprovider(rpcSubproviders));
@@ -201,13 +198,13 @@ export class Blockchain {
     }
     public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
         const tokens = fakeTokenRegistry[this.networkId];
-        const tokenIfExists = _.find(tokens, { address: tokenAddress });
+        const tokenIfExists = find(tokens, { address: tokenAddress });
 
         // HACK: Override token addresses on testnets
         const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId];
         let isTokenAddressInOverrides = false;
         if (tokenSymbolToAddressOverrides !== undefined) {
-            isTokenAddressInOverrides = _.values(tokenSymbolToAddressOverrides).includes(tokenAddress);
+            isTokenAddressInOverrides = values(tokenSymbolToAddressOverrides).includes(tokenAddress);
         }
         return tokenIfExists !== undefined || isTokenAddressInOverrides;
     }
@@ -308,7 +305,7 @@ export class Blockchain {
             });
         const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
         const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any;
-        const logFill = _.find(logs, { event: ExchangeEvents.Fill });
+        const logFill = find(logs, { event: ExchangeEvents.Fill });
         const args = (logFill.args as any) as ExchangeFillEventArgs;
         const takerAssetFilledAmount = args.takerAssetFilledAmount;
         return takerAssetFilledAmount;
@@ -321,7 +318,7 @@ export class Blockchain {
         });
         const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
         const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any;
-        const logCancel = _.find(logs, { event: ExchangeEvents.Cancel });
+        const logCancel = find(logs, { event: ExchangeEvents.Cancel });
         const args = (logCancel.args as any) as ExchangeCancelEventArgs;
         const cancelledOrderHash = args.orderHash;
         return cancelledOrderHash;
@@ -512,9 +509,9 @@ export class Blockchain {
             this._userAddressIfExists === undefined
                 ? {}
                 : trackedTokenStorage.getTrackedTokensByAddress(this._userAddressIfExists, this.networkId);
-        const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
-        const tokenRegistryTokenSymbols = _.map(tokenRegistryTokens, (t) => t.symbol);
-        const defaultTrackedTokensInRegistry = _.intersection(
+        const tokenRegistryTokens = values(tokenRegistryTokensByAddress);
+        const tokenRegistryTokenSymbols = map(tokenRegistryTokens, (t) => t.symbol);
+        const defaultTrackedTokensInRegistry = intersection(
             tokenRegistryTokenSymbols,
             configs.DEFAULT_TRACKED_TOKEN_SYMBOLS,
         );
@@ -530,20 +527,20 @@ export class Blockchain {
             errorReporter.report(err);
             return;
         }
-        if (_.isEmpty(trackedTokensByAddress)) {
-            _.each(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, (symbol) => {
-                const token = _.find(tokenRegistryTokens, (t) => t.symbol === symbol);
+        if (isEmpty(trackedTokensByAddress)) {
+            each(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, (symbol) => {
+                const token = find(tokenRegistryTokens, (t) => t.symbol === symbol);
                 token.trackedTimestamp = currentTimestamp;
                 trackedTokensByAddress[token.address] = token;
             });
             if (this._userAddressIfExists !== undefined) {
-                _.each(trackedTokensByAddress, (token: Token) => {
+                each(trackedTokensByAddress, (token: Token) => {
                     trackedTokenStorage.addTrackedTokenToUser(this._userAddressIfExists, this.networkId, token);
                 });
             }
         } else {
             // Properly set all tokenRegistry tokens `trackedTimestamp` if they are in the existing trackedTokens array
-            _.each(trackedTokensByAddress, (trackedToken: Token, address: string) => {
+            each(trackedTokensByAddress, (trackedToken: Token, address: string) => {
                 if (tokenRegistryTokensByAddress[address] !== undefined) {
                     tokenRegistryTokensByAddress[address].trackedTimestamp = trackedToken.trackedTimestamp;
                 }
@@ -553,10 +550,10 @@ export class Blockchain {
             ...tokenRegistryTokensByAddress,
             ...trackedTokensByAddress,
         };
-        const allTokens = _.values(allTokensByAddress);
+        const allTokens = values(allTokensByAddress);
         const mostPopularTradingPairTokens: Token[] = [
-            _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0] }),
-            _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1] }),
+            find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0] }),
+            find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1] }),
         ];
         const sideToAssetToken: SideToAssetToken = {
             [Side.Deposit]: {
@@ -633,7 +630,7 @@ export class Blockchain {
         if (update.networkVersion === 'loading' || this._ledgerSubprovider !== undefined) {
             return;
         }
-        const updatedNetworkId = _.parseInt(update.networkVersion);
+        const updatedNetworkId = lodashParseInt(update.networkVersion);
         if (this.networkId === updatedNetworkId) {
             return;
         }
@@ -769,7 +766,7 @@ export class Blockchain {
             const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId];
             if (tokenAddressOverrides !== undefined) {
                 // HACK: Override token addresses on testnets
-                tokenRegistryTokens = _.map(tokenRegistryTokens, (token: ZeroExToken) => {
+                tokenRegistryTokens = map(tokenRegistryTokens, (token: ZeroExToken) => {
                     const overrideIfExists = tokenSymbolToAddressOverrides[token.symbol];
                     if (overrideIfExists !== undefined) {
                         return {
@@ -782,7 +779,7 @@ export class Blockchain {
             }
         }
         const tokenByAddress: TokenByAddress = {};
-        _.each(tokenRegistryTokens, (t: ZeroExToken) => {
+        each(tokenRegistryTokens, (t: ZeroExToken) => {
             // HACK: For now we have a hard-coded list of iconUrls for the dummyTokens
             // TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry
             const iconUrl = utils.getTokenIconUrl(t.symbol);
@@ -920,7 +917,7 @@ export class Blockchain {
         } catch (err) {
             const errMsg = `${err}`;
             logUtils.log(`Notice: Error encountered: ${err} ${err.stack}`);
-            if (_.includes(errMsg, 'not been deployed to detected network')) {
+            if (includes(errMsg, 'not been deployed to detected network')) {
                 throw new Error(BlockchainCallErrs.ContractDoesNotExist);
             } else {
                 errorReporter.report(err);

diff --git a/ts/blockchain_watcher.ts b/ts/blockchain_watcher.ts
@@ -1,6 +1,5 @@
 import { BigNumber, intervalUtils, logUtils } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
-import * as _ from 'lodash';
 import { Dispatcher } from 'ts/redux/dispatcher';
 
 export class BlockchainWatcher {

diff --git a/ts/components/aboutPageLayout.tsx b/ts/components/aboutPageLayout.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 

diff --git a/ts/components/card.tsx b/ts/components/card.tsx
@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import { map } from 'lodash-es';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -35,7 +35,7 @@ export const Card: React.StatelessComponent<CardProps> = (props: CardProps) => {
                 </Heading>
                 <Paragraph isMuted={true}>{description}</Paragraph>
                 <Links>
-                    {_.map(links, (link, index) => (
+                    {map(links, (link, index) => (
                         <Button
                             href={link.url}
                             target={link.url !== undefined ? '_blank' : undefined}

diff --git a/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,5 +1,5 @@
 import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
+import { isEmpty } from 'lodash-es';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
@@ -179,7 +179,7 @@ export class EthWethConversionDialog extends React.Component<
         this.props.onCancelled();
     }
     private async _fetchEthTokenBalanceAsync(): Promise<void> {
-        const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
+        const userAddressIfExists = isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
         const [balance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
             userAddressIfExists,
             this.props.token.address,

diff --git a/ts/components/dialogs/ledger_config_dialog.tsx b/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,6 +1,6 @@
 import { BigNumber, logUtils } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
-import * as _ from 'lodash';
+import { isEmpty, map, startsWith, values } from 'lodash-es';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
@@ -85,7 +85,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         );
     }
     private _renderConnectStep(): React.ReactNode {
-        const networkIds = _.values(constants.NETWORK_ID_BY_NAME);
+        const networkIds = values(constants.NETWORK_ID_BY_NAME);
         return (
             <div>
                 <div className="h4 pt3">Follow these instructions before proceeding:</div>
@@ -115,7 +115,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                         labelComplete="Connected!"
                         onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
                     />
-                    {!_.isEmpty(this.state.connectionErrMsg) && (
+                    {!isEmpty(this.state.connectionErrMsg) && (
                         <div className="pt2 left-align" style={{ color: colors.red200 }}>
                             {this.state.connectionErrMsg}
                         </div>
@@ -162,7 +162,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         );
     }
     private _renderAddressTableRows(): React.ReactNode {
-        const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
+        const rows = map(this.state.userAddresses, (userAddress: string, i: number) => {
             const balanceInWei = this.state.addressBalances[i];
             const addressTooltipId = `address-${userAddress}`;
             const balanceTooltipId = `balance-${userAddress}`;
@@ -254,7 +254,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     }
     private _onDerivationPathChanged(_event: any, derivationPath: string): void {
         let derivationErrMsg = '';
-        if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
+        if (!startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
             derivationErrMsg = 'Must be valid Ethereum path.';
         }
 
@@ -293,7 +293,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         let userAddresses: string[];
         userAddresses = await this.props.blockchain.getUserAccountsAsync();
 
-        if (_.isEmpty(userAddresses)) {
+        if (isEmpty(userAddresses)) {
             throw new Error('No addresses retrieved.');
         }
         return userAddresses;

diff --git a/ts/components/dialogs/send_dialog.tsx b/ts/components/dialogs/send_dialog.tsx
@@ -1,5 +1,4 @@
 import { BigNumber } from '@0x/utils';
-import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';

diff --git a/ts/components/docs/sidebar/filters_group.tsx b/ts/components/docs/sidebar/filters_group.tsx
@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import { orderBy } from 'lodash-es';
 import * as React from 'react';
 import { connectRefinementList } from 'react-instantsearch-dom';
 
@@ -26,7 +26,7 @@ const FiltersList: React.FC<IFilterListProps> = ({ attribute, items, currentRefi
     //    then visually disabling filters. That way the user is still able to see all filters, even those that do not apply to
     //    the current state of filtering.
 
-    const sortAlphabetically = (_items: IFilterProps[]) => _.orderBy(_items, 'label', 'asc');
+    const sortAlphabetically = (_items: IFilterProps[]) => orderBy(_items, 'label', 'asc');
 
     const sortByDifficulty = (_items: IFilterProps[]) => {
         return _items.sort((a, b) => difficultyOrder.indexOf(a.label) - difficultyOrder.indexOf(b.label));

diff --git a/ts/components/docs/sidebar/sidebar_desktop.tsx b/ts/components/docs/sidebar/sidebar_desktop.tsx
@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import { throttle } from 'lodash-es';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -57,7 +57,7 @@ export const SidebarDesktop: React.FC<ISidebarWrapperProps> = ({ children }) =>
         }
     };
 
-    const throttledListener = _.throttle(listener, THROTTLE_RATE);
+    const throttledListener = throttle(listener, THROTTLE_RATE);
 
     React.useEffect(() => {
         const { top } = asideRef.current.getBoundingClientRect();