Merge 6ff3278 into 3285a18

package.json

@@ -27,6 +27,7 @@
     "gulp-uglifycss": "^1.0.6",
     "gulp-util": "^3.0.8",
     "husky": "0.14.3",
+    "jest-localstorage-mock": "^2.2.0",
     "markdown-toc": "^1.2.0",
     "mobx-react-devtools": "^4.2.15",
     "mockdate": "^2.0.2",
@@ -75,6 +76,7 @@
     "final-form": "^4.3.1",
     "final-form-arrays": "^1.0.4",
     "final-form-calculate": "^1.1.0",
+    "final-form-set-field-touched": "^1.0.0",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "immutability-helper": "^2.5.0",
@@ -156,45 +158,25 @@
     "stop": "nps test.e2e.stop"
   },
   "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js"
-    ],
-    "testMatch": [
-      "<rootDir>/test/**/__tests__/**/*.js?(x)",
-      "<rootDir>/test/**/?(*.)(spec|test).js?(x)"
-    ],
+    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
+    "setupFiles": [ "<rootDir>/config/polyfills.js", "jest-localstorage-mock" ],
+    "testMatch": [ "<rootDir>/test/**/__tests__/**/*.js?(x)", "<rootDir>/test/**/?(*.)(spec|test).js?(x)" ],
     "testEnvironment": "node",
     "testURL": "http://localhost",
     "transform": {
       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
-    ],
+    "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$" ],
     "moduleNameMapper": {
       "^react-native$": "react-native-web"
     },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "moduleFileExtensions": [ "web.js", "js", "json", "web.jsx", "jsx", "node" ],
+    "snapshotSerializers": [ "enzyme-to-json/serializer" ]
   },
   "babel": {
-    "presets": [
-      "react-app"
-    ]
+    "presets": [ "react-app" ]
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.js

@@ -1,26 +1,14 @@
 import React, { Component } from 'react'
 import { inject, observer } from 'mobx-react'
-import {
-  Header,
-  Footer,
-  Home,
-  Manage,
-  stepOne,
-  stepTwo,
-  stepThree,
-  stepFour,
-  Crowdsale,
-  Contribute,
-  Stats
-} from './components/index'
+import { Home, Manage, stepOne, stepTwo, stepThree, stepFour, Crowdsale, Contribute, Stats } from './components/index'
 import NoWeb3 from './components/Common/NoWeb3'
 import IncompleteDeploy from './components/IncompleteDeploy'
-import { getQueryVariable } from './utils/utils'
+import { getAddrFromQuery, toast } from './utils/utils'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import AlertContainer from 'react-alert'
 import { TOAST } from './utils/constants'
-import { toast } from './utils/utils'
 import { Web3Provider } from './react-web3'
+import { getQueryVariable } from './utils/utils'
 
 // import './assets/stylesheets/application.css'
 
@@ -43,12 +31,12 @@ class App extends Component {
   }
   render() {
     const { deploymentStore } = this.props
-    var crowdsaleAddr = getQueryVariable('addr')
+    let crowdsaleAddr = getAddrFromQuery()
 
     return (
       <Router>
         <div>
-          <Header />
+          {/* <Header /> */}
 
           <Switch>
             <Route exact path="/crowdsale" component={Crowdsale} />
@@ -76,7 +64,7 @@ class App extends Component {
             </Route>
           </Switch>
 
-          <Footer />
+          {/* <Footer /> */}
           <AlertContainer ref={a => (toast.msg = a)} {...TOAST.DEFAULT_OPTIONS} />
         </div>
       </Router>

src/assets/stylesheets/v2.0/base/_display.scss

@@ -0,0 +1,11 @@
+.hidden {
+    display: none;
+}
+
+.display-block {
+    display: block;
+}
+
+.display-inline {
+    display: inline;
+}

src/assets/stylesheets/v2.0/base/_effects.scss

@@ -0,0 +1,16 @@
+.background-blur {
+    animation-duration: 0.25s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-name: sw-ModalAnimation_in;
+    animation-timing-function: linear;
+}
+
+@keyframes sw-ModalAnimation_in {
+    0% {
+        filter: blur(0);
+    }
+    100% {
+        filter: blur(2px);
+    }
+}

src/assets/stylesheets/v2.0/base/_index.scss

@@ -1,2 +1,6 @@
+@import 'reset';
 @import 'normalize';
+
+@import 'display';
+@import 'effects';
 @import 'typography';

src/assets/stylesheets/v2.0/base/_reset.scss

@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}

src/assets/stylesheets/v2.0/base/_typography.scss

@@ -2,7 +2,7 @@
 
 body {
     -webkit-font-smoothing: antialiased;
-    color: #4a4a4a;
+    color: $base-text-color;
     font-family: Nunito, sans-serif;
-    font-size: 16px;
+    font-size: $base-font-size;
 }

src/assets/stylesheets/v2.0/components/_Button.scss

@@ -0,0 +1,50 @@
+$sw-Button-height: 40px;
+
+@mixin btn-common($bg-color, $darken: 10%) {
+    background-color: $bg-color;
+    border-color: $bg-color;
+    border-style: solid;
+
+    &:focus,
+    &.active,
+    &:hover {
+        background-color: darken($bg-color, $darken);
+        border-color: darken($bg-color, $darken);
+    }
+
+    &[disabled] {
+        &:focus,
+        &.active,
+        &:hover {
+            background-color: $bg-color;
+            border-color: $bg-color;
+        }
+    }
+
+}
+
+.sw-Button {
+    border-radius: 6px;
+    border-width: 1px;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 600;
+    height: $sw-Button-height;
+    line-height: $sw-Button-height;
+    padding: 0 20px;
+
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+}
+
+.sw-Button-primary {
+    @include btn-common($brand-primary);
+}
+
+.sw-Button-secondary {
+    @include btn-common($brand-secondary);
+}

src/assets/stylesheets/v2.0/components/_EmptyContentTextOnly.scss

@@ -0,0 +1,11 @@
+.sw-EmptyContentTextOnly {
+    font-size: 18px;
+    line-height: 1.5;
+    margin: 0;
+    text-align: center;
+    word-wrap: break-word;
+
+    @media (min-width: $breakpoint-md) {
+        padding-top: 40px;
+    }
+}

src/assets/stylesheets/v2.0/components/_FlexTable.scss

@@ -0,0 +1,75 @@
+
+
+.sw-FlexTable {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  // little gradient to indicate when there's some content overflow
+  &:after {
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 16%, #ffffff);
+    content: '';
+    height: 100%;
+    position: absolute;
+    right: -#{ $sw-ModalWindow-horizontal-padding-xs };
+    top: 0;
+    width: 80px;
+    z-index: 12;
+    @media (min-width: $breakpoint-md) {
+      display: none;
+    }
+  }
+}
+
+.sw-FlexTable_Head {
+  font-weight: 700;
+}
+
+.sw-FlexTable_Body-scrollable {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 100%;
+  min-height: auto;
+  overflow: auto;
+}
+
+.sw-FlexTable_Row {
+  display: flex;
+  min-height: min-content;
+  min-width: max-content;
+  padding: 14px 10px;
+
+  &:not(.sw-FlexTable_Head):nth-child(odd) {
+    background-color: rgba(155, 155, 155, 0.2);
+  }
+
+  &:not(.sw-FlexTable_Head):hover {
+    background-color: rgba(155, 155, 155, 0.4);
+  }
+
+  &:not(.sw-FlexTable_Head).selected {
+    color: #fff;
+    background-color: $brand-secondary;
+  }
+
+}
+
+.sw-FlexTable_Row-selectable {
+  cursor: pointer;
+}
+
+.sw-FlexTable_Td {
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+// special / unique cases
+.sw-FlexTable_Body-crowdsale {
+  max-height: 305px;
+  min-height: 305px;
+
+  @media (min-width: $breakpoint-md) {
+    max-height: 230px;
+    min-height: 230px;
+  }
+}