Add mobile page webpack config

package.json

@@ -9,13 +9,16 @@
 		"test": "jest",
 		"tslint": "tslint -c tslint.json -p tsconfig.json src/**/*.ts{,x} --fix",
 		"start": "webpack-dev-server --config webpack.config.dev.js",
+		"startMobile": "webpack-dev-server --config webpack.config.mobiledev.js",
 		"analyze": "npm run clean && npm run analyze:build && npm run analyze:no:build",
 		"analyze:build": "webpack --config webpack.config.analyze.js",
 		"analyze:no:build": "webpack-bundle-analyzer dist/stats.json",
 		"rebuild": "webpack --config webpack.config.kovan.js",
 		"rebuildLive": "webpack --config webpack.config.prod.js",
+		"rebuildLiveMobile": "webpack --config webpack.config.mobileprod.js",
 		"build": "npm run clean && npm run rebuild",
-		"buildLive": "npm run clean && npm run rebuildLive"
+		"buildLive": "npm run clean && npm run rebuildLive",
+		"buildLiveMobile": "npm run clean && npm run rebuildLiveMobile"
 	},
 	"jest": {
 		"globals": {

src/ts/appStakingMobile.tsx

@@ -0,0 +1,41 @@
+// fix for @ledgerhq/hw-transport-u2f 4.28.0
+import '@babel/polyfill';
+import 'css/style.css';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import * as dualClassActions from './actions/dualClassActions';
+import * as dynamoActions from './actions/dynamoActions';
+import * as web3Actions from './actions/web3Actions';
+import { web3Wrapper } from './common/wrappers';
+import StakingMobile from './containers/Pages/StakingMobileContainer';
+import store from './store/store';
+
+store.dispatch(web3Actions.refresh());
+store.dispatch(dynamoActions.scanStatus());
+
+setInterval(() => {
+	store.dispatch(web3Actions.refresh());
+	store.dispatch(dynamoActions.scanStatus());
+}, 60000);
+
+web3Wrapper.onWeb3AccountUpdate((addr: string, network: number) => {
+	if (
+		addr.toLowerCase() !== store.getState().web3.account.toLowerCase() ||
+		network !== store.getState().web3.network
+	) {
+		store.dispatch(web3Actions.accountUpdate(addr));
+		store.dispatch(web3Actions.networkUpdate(network));
+		store.dispatch(dualClassActions.refresh(true));
+	}
+});
+if ((window as any).ethereum) (window as any).ethereum.enable();
+ReactDOM.render(
+	<Provider store={store}>
+		<Router>
+			<StakingMobile />
+		</Router>
+	</Provider>,
+	document.getElementById('app')
+);

webpack.config.mobiledev.js

@@ -0,0 +1,110 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+	mode: 'development',
+	entry: {
+		app: path.resolve(__dirname, 'src/ts/appStakingMobile.tsx')
+	},
+	output: {
+		path: path.join(__dirname, 'dist'),
+		filename: '[name].js',
+		publicPath: '/'
+	},
+	devServer: {
+		https: true,
+		contentBase: './dist',
+		hot: true,
+		historyApiFallback: true,
+		host: '0.0.0.0',
+		disableHostCheck: true
+	},
+	plugins: [
+		new webpack.LoaderOptionsPlugin({
+			debug: true
+		}),
+		new webpack.SourceMapDevToolPlugin(),
+		new webpack.DefinePlugin({
+			'process.env.NODE_ENV': JSON.stringify('development'),
+			__DEV__: true,
+			__KOVAN__: false
+		}),
+		new webpack.HotModuleReplacementPlugin(),
+		new HtmlWebpackPlugin({
+			title: 'DUO | Trustless Derivatives',
+			template: path.resolve(__dirname, 'src/index.ejs'),
+			favicon: path.join(__dirname, 'src/images/favicon.ico'),
+			filename: 'index.html'
+		})
+	],
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				commons: {
+					test: /[\\/]node_modules[\\/]/,
+					name: 'vendors',
+					chunks: 'all'
+				}
+			}
+		}
+	},
+	module: {
+		rules: [
+			{
+				enforce: 'pre',
+				test: /\.tsx?$/,
+				include: path.join(__dirname, 'src'),
+				use: 'tslint-loader'
+			},
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			},
+			{
+				test: /\.less$/,
+				use: [
+					'style-loader',
+					'css-loader',
+					{
+						loader: 'less-loader',
+						options: {
+							javascriptEnabled: true
+						}
+					}
+				]
+			},
+			{
+				test: /\.(jpg|jpeg|png|gif|svg)(\?.*)?$/,
+				use: [
+					{
+						loader: 'url-loader',
+						options: {
+							limit: 20480
+						}
+					}
+				]
+			},
+			{
+				test: /\.(xlsm|csv|ico|eot|otf|webp|ttf|ttc|woff|woff2|pdf)(\?.*)?$/,
+				exclude: /node_modules/,
+				use: 'file-loader?name=[name].[ext]'
+			}
+		]
+	},
+	resolve: {
+		alias: {
+			moment: path.resolve('./node_modules/moment'),
+			'bn.js': path.resolve('./node_modules/bn.js'),
+			immutable: path.resolve('./node_modules/immutable'),
+			elliptic: path.resolve('./node_modules/elliptic')
+		},
+		modules: [path.join(__dirname, 'src'), 'node_modules'],
+		extensions: ['.js', '.jsx', '.ts', '.tsx']
+	}
+};

webpack.config.mobileprod.js

@@ -0,0 +1,209 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+	mode: 'production',
+	entry: {
+		app: path.resolve(__dirname, 'src/ts/appStakingMobile.tsx')
+	},
+	output: {
+		path: path.join(__dirname, 'dist'),
+		filename: '[name].[contenthash].js'
+	},
+	plugins: [
+		new webpack.DefinePlugin({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+			__DEV__: false,
+			__KOVAN__: false
+		}),
+		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+		new MiniCssExtractPlugin({
+			filename: 'styles.[contenthash].css'
+		}),
+		new HtmlWebpackPlugin({
+			title: 'DUO | Trustless Derivatives',
+			template: path.resolve(__dirname, 'src/index.ejs'),
+			favicon: path.join(__dirname, 'src/images/favicon.ico'),
+			filename: 'index.html'
+		}),
+		new webpack.HashedModuleIdsPlugin()
+	],
+	optimization: {
+		minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
+		runtimeChunk: 'single',
+		splitChunks: {
+			chunks: 'all',
+			maxInitialRequests: Infinity,
+			minSize: 0,
+			cacheGroups: {
+				finbook: {
+					test: /[\\/]node_modules[\\/]@finbook/,
+					name: 'finbook',
+					priority: 100
+				},
+				'idna-uts46-hx': {
+					test: /[\\/]node_modules[\\/]idna-uts46-hx/,
+					name: 'idna-uts46-hx',
+					priority: 100
+				},
+				bip39: {
+					test: /[\\/]node_modules[\\/]bip39/,
+					name: 'bip39',
+					priority: 100
+				},
+				unorm: {
+					test: /[\\/]node_modules[\\/]unorm/,
+					name: 'unorm',
+					priority: 100
+				},
+				eth: {
+					test: /[\\/]node_modules[\\/]eth/,
+					name: 'eth',
+					priority: 100
+				},
+				d3: {
+					test: /[\\/]node_modules[\\/]d3/,
+					name: 'd3',
+					priority: 100
+				},
+				immutable: {
+					test: /[\\/]node_modules[\\/]immutable/,
+					name: 'immutable',
+					priority: 100
+				},
+				moment: {
+					test: /[\\/]node_modules[\\/]moment/,
+					name: 'moment',
+					priority: 100
+				},
+				react: {
+					test: /[\\/]node_modules[\\/]react|redux/,
+					name: 'react',
+					priority: 100
+				},
+				ant: {
+					test: /[\\/]node_modules[\\/]ant/,
+					name: 'antd',
+					priority: 100
+				},
+				antIcon: {
+					test: /[\\/]node_modules[\\/]@ant/,
+					name: 'antIcon',
+					priority: 100
+				},
+				cryptoJs: {
+					test: /[\\/]node_modules[\\/]crypto/,
+					name: 'cryptoJs',
+					priority: 100
+				},
+				lodash: {
+					test: /[\\/]node_modules[\\/]lodash/,
+					name: 'lodash',
+					priority: 100
+				},
+				bn: {
+					test: /[\\/]node_modules[\\/]bn|bignumber/,
+					name: 'bn',
+					priority: 100
+				},
+				elliptic: {
+					test: /[\\/]node_modules[\\/]elliptic/,
+					name: 'elliptic',
+					priority: 100
+				},
+				coreJS: {
+					test: /[\\/]node_modules[\\/]core/,
+					name: 'coreJS',
+					priority: 100
+				},
+				rc: {
+					test: /[\\/]node_modules[\\/]rc/,
+					name: 'rc',
+					priority: 100
+				},
+				aws: {
+					test: /[\\/]node_modules[\\/]aws/,
+					name: 'aws',
+					priority: 100
+				},
+				web3: {
+					test: /[\\/]node_modules[\\/]web3/,
+					name: 'web3',
+					priority: 100
+				},
+				draftjs: {
+					test: /[\\/]node_modules[\\/]draft-js/,
+					name: 'draft-js',
+					priority: 100
+				},
+				commons: {
+					test: /[\\/]node_modules[\\/]/,
+					name: 'vendors',
+					priority: 0
+				}
+			}
+		}
+	},
+	module: {
+		rules: [
+			{
+				enforce: 'pre',
+				test: /\.tsx?$/,
+				include: path.join(__dirname, 'src'),
+				use: 'tslint-loader'
+			},
+			{
+				test: /\.tsx?$/,
+				use: 'ts-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.css$/,
+				use: [MiniCssExtractPlugin.loader, 'css-loader']
+			},
+			{
+				test: /\.less$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					'css-loader',
+					{
+						loader: 'less-loader',
+						options: {
+							javascriptEnabled: true
+						}
+					}
+				]
+			},
+			{
+				test: /\.(jpg|jpeg|png|gif|svg)(\?.*)?$/,
+				use: [
+					{
+						loader: 'url-loader',
+						options: {
+							limit: 20480
+						}
+					}
+				]
+			},
+			{
+				test: /\.(xlsm|csv|ico|eot|otf|webp|ttf|ttc|woff|woff2|pdf)(\?.*)?$/,
+				exclude: /node_modules/,
+				use: 'file-loader?name=[name].[ext]'
+			}
+		]
+	},
+	resolve: {
+		alias: {
+			moment: path.resolve('./node_modules/moment'),
+			'bn.js': path.resolve('./node_modules/bn.js'),
+			immutable: path.resolve('./node_modules/immutable'),
+			elliptic: path.resolve('./node_modules/elliptic')
+		},
+		modules: [path.join(__dirname, 'src'), 'node_modules'],
+		extensions: ['.js', '.jsx', '.ts', '.tsx']
+	}
+};