diff --git a/.babelrc b/.babelrc
index 8148cfc2..0ad85de6 100644
--- a/.babelrc
+++ b/.babelrc
@@ -10,6 +10,7 @@
"@babel/stage-0"
],
"plugins": [
+ "@babel/plugin-syntax-dynamic-import",
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
diff --git a/package-lock.json b/package-lock.json
index d45357d0..dabe6a32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15158,6 +15158,14 @@
"theming": "1.3.0"
}
},
+ "react-loadable": {
+ "version": "5.3.1",
+ "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.3.1.tgz",
+ "integrity": "sha1-lpnpoI/tSbrNacqqKCA0tip2vN0=",
+ "requires": {
+ "prop-types": "15.6.1"
+ }
+ },
"react-popper": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.2.tgz",
@@ -15204,11 +15212,6 @@
"warning": "3.0.0"
}
},
- "react-router-redux": {
- "version": "4.0.8",
- "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz",
- "integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4="
- },
"react-scrollbar-size": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz",
diff --git a/package.json b/package.json
index 6bba4a7f..ca734215 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"devDependencies": {
"@babel/cli": "^7.0.0-beta.40",
"@babel/core": "^7.0.0-beta.40",
+ "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.40",
"@babel/polyfill": "^7.0.0-beta.40",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
@@ -63,6 +64,7 @@
"material-ui": "^1.0.0-beta.35",
"material-ui-icons": "^1.0.0-beta.35",
"react-final-form": "^3.1.2",
+ "react-loadable": "^5.3.1",
"react-router-dom": "^4.2.2"
},
"jest": {
diff --git a/src/App.js b/src/App.js
index cdab358a..59ebdc40 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,6 @@
import React from 'react'
-import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'
-import Welcome from '~/routes/welcome/components/Layout'
-
-const AppRoutes = () => (
-
-
-
-
-)
+import { BrowserRouter } from 'react-router-dom'
+import AppRoutes from './routes'
const ReactRouterApp = () => (
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 00000000..5e6649c6
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,23 @@
+import { CircularProgress } from 'material-ui/Progress';
+import React from 'react'
+import Loadable from 'react-loadable';
+import { Switch, Redirect, Route } from 'react-router-dom'
+import Welcome from './welcome/components/Layout'
+
+const Loading = () =>
+
+const Transactions = Loadable({
+ loader: () => import('./transactions/components/Layout'),
+ loading: Loading,
+})
+
+const Routes = () => (
+
+
+
+
+
+)
+
+export default Routes
+
diff --git a/src/routes/transactions/components/Layout.jsx b/src/routes/transactions/components/Layout.jsx
new file mode 100644
index 00000000..5fd737f7
--- /dev/null
+++ b/src/routes/transactions/components/Layout.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+class Layout extends React.Component {
+ render() {
+ return (
+ I am transactions Layout
+ )
+ }
+}
+
+export default Layout
diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx
index 6295feb7..a90cdb6b 100644
--- a/src/routes/welcome/components/Layout.jsx
+++ b/src/routes/welcome/components/Layout.jsx
@@ -1,6 +1,7 @@
import Button from 'material-ui/Button';
import React, { Component } from 'react'
import { Form, Field } from 'react-final-form'
+import { Link } from 'react-router-dom'
import contract from 'truffle-contract'
import TextField from '~/components/forms/TextField'
import Page from '~/components/layout/Page'
@@ -104,6 +105,11 @@ class App extends Component {
)}
/>
+
+
+
);