集成material-ui

components/Header.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { AppBar, Toolbar, Typography, Button } from '@material-ui/core'
+import { withStyles } from '@material-ui/core/styles'
+
+import { Link } from '../routes'
+
+const styles = {
+  wrapper: {
+    margin: '0 auto',
+    width: '80%',
+    maxWidth: '1200px',
+    display: 'flex'
+  },
+  brand: {
+    borderRight: '2px solid #CCCCCC',
+    paddingRight: '1em',
+    marginRight: '1em'
+  },
+  toolbar: {
+    padding: 0,
+    flex: 1
+  },
+  flexContainer: {
+    flex: 1,
+    display: 'flex'
+  },
+  anchor: {
+    display: 'block',
+    textDecoration: 'none',
+    marginRight: '16px'
+  }
+}
+
+class Header extends React.Component {
+  render() {
+    const { classes } = this.props
+
+    return (
+      <AppBar position="static" color="default">
+        <div className={classes.wrapper}>
+          <Toolbar className={classes.toolbar}>
+            <Typography variant="title" color="inherit" className={classes.brand}>
+              众筹 DApp
+            </Typography>
+            <p className={classes.flexContainer}>
+              <a href="/" className={classes.anchor}>
+                <Typography variant="title" color="inherit">
+                  项目列表
+                </Typography>
+              </a>
+            </p>
+            <Link route="/projects/create">
+              <Button variant="raised" color="primary">
+                发起项目
+              </Button>
+            </Link>
+          </Toolbar>
+        </div>
+      </AppBar>
+    )
+  }
+}
+
+export default withStyles(styles)(Header)

components/Layout.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+
+import Header from './Header'
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    minHeight: '100vh'
+  },
+  wrapper: {
+    margin: '0 auto',
+    width: '80%',
+    maxWidth: '1200px',
+    marginTop: '1em'
+  }
+}
+
+class Layout extends React.Component {
+  render() {
+    const { classes } = this.props
+
+    return (
+      <div className={classes.container}>
+        <Header />
+        <div className={classes.wrapper}>{this.props.children}</div>
+      </div>
+    )
+  }
+}
+
+export default withStyles(styles)(Layout)

libs/getPageContext.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-underscore-dangle */
+import { SheetsRegistry } from 'jss'
+import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles'
+import purple from '@material-ui/core/colors/purple'
+import green from '@material-ui/core/colors/green'
+// A theme with custom primary and secondary color.
+// It's optional.
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: purple[300],
+      main: purple[500],
+      dark: purple[700]
+    },
+    secondary: {
+      light: green[300],
+      main: green[500],
+      dark: green[700]
+    }
+  }
+})
+function createPageContext() {
+  return {
+    theme,
+    // This is needed in order to deduplicate the injection of CSS in the page.
+    sheetsManager: new Map(),
+    // This is needed in order to inject the critical CSS.
+    sheetsRegistry: new SheetsRegistry(),
+    // The standard class name generator.
+    generateClassName: createGenerateClassName()
+  }
+}
+export default function getPageContext() {
+  // Make sure to create a new context for every server-side request so that data
+  // isn't shared between connections (which would be bad).
+  if (!process.browser) {
+    return createPageContext()
+  }
+  // Reuse context on the client-side.
+  if (!global.__INIT_MATERIAL_UI__) {
+    global.__INIT_MATERIAL_UI__ = createPageContext()
+  }
+  return global.__INIT_MATERIAL_UI__
+}

package.json

@@ -17,6 +17,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/core": "^1.4.0",
     "bignumber.js": "^7.2.1",
     "fs-extra": "^6.0.1",
     "next": "^6.1.1",

pages/_app.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import App, { Container } from 'next/app';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import JssProvider from 'react-jss/lib/JssProvider';
+import getPageContext from '../libs/getPageContext';
+class MyApp extends App {
+  constructor(props) {
+    super(props);
+    this.pageContext = getPageContext();
+  }
+  pageContext = null;
+  componentDidMount() {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+  }
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <Container>
+        {/* Wrap every page in Jss and Theme providers */}
+        <JssProvider
+          registry={this.pageContext.sheetsRegistry}
+          generateClassName={this.pageContext.generateClassName}
+        >
+          {/* MuiThemeProvider makes the theme available down the React
+              tree thanks to React context. */}
+          <MuiThemeProvider
+            theme={this.pageContext.theme}
+            sheetsManager={this.pageContext.sheetsManager}
+          >
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            {/* Pass pageContext to the _document though the renderPage enhancer
+                to render collected styles on server side. */}
+            <Component pageContext={this.pageContext} {...pageProps} />
+          </MuiThemeProvider>
+        </JssProvider>
+      </Container>
+    );
+  }
+}
+export default MyApp;

pages/_document.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Document, { Head, Main, NextScript } from 'next/document'
+import flush from 'styled-jsx/server'
+class MyDocument extends Document {
+  render() {
+    const { pageContext } = this.props
+    return (
+      <html lang="en" dir="ltr">
+        <Head>
+          <title>众筹 DApp</title>
+          <meta charSet="utf-8" />
+          {/* Use minimum-scale=1 to enable GPU rasterization */}
+          <meta
+            name="viewport"
+            content={'user-scalable=0, initial-scale=1, ' + 'minimum-scale=1, width=device-width, height=device-height'}
+          />
+          {/* PWA primary color */}
+          <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
+MyDocument.getInitialProps = ctx => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+  // Render app and page and get the context of the page with collected side effects.
+  let pageContext
+  const page = ctx.renderPage(Component => {
+    const WrappedComponent = props => {
+      pageContext = props.pageContext
+      return <Component {...props} />
+    }
+    WrappedComponent.propTypes = {
+      pageContext: PropTypes.object.isRequired
+    }
+    return WrappedComponent
+  })
+  return {
+    ...page,
+    pageContext,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: (
+      <React.Fragment>
+        <style
+          id="jss-server-side"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
+        />
+        {flush() || null}
+      </React.Fragment>
+    )
+  }
+}
+export default MyDocument

pages/index.js

@@ -1,7 +1,17 @@
 import React from 'react'
+import Button from '@material-ui/core/Button'
+import Layout from '../components/Layout'
 
-export default class Index extends React.Component {
+class Index extends React.Component {
   render() {
-    return <div>Welcome to Ethereum ICO DApp!</div>
+    return (
+      <Layout>
+        <Button variant="raised" color="primary">
+          Welcome to Ethereum ICO DApp!
+        </Button>
+      </Layout>
+    )
   }
 }
+
+export default Index