Merge pull request #159 from MyEtherWallet/develop

Alpha 0.01 - Release

.babelrc

@@ -0,0 +1,25 @@
+{
+    "plugins": [
+        [
+            "transform-runtime", {
+                "helpers": false,
+                "polyfill": false,
+                "regenerator": true,
+                "moduleName": "babel-runtime"
+            }
+        ],
+        ["module-resolver", {
+            "root": ["./common"],
+            "alias": {
+                "underscore": "lodash"
+            },
+            "cwd": "babelrc"
+        }],
+    "react-hot-loader/babel"],
+    "presets": ["es2015", "react", "stage-0", "flow"],
+    "env": {
+      "production": {
+          "presets": ["react-optimize"]
+      }
+    }
+}

.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[{*.js,*.jsx}]
+end_of_line = lf
+charset = utf-8
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "babel-eslint",
+  "plugins": ["react"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "amd": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "rules": {
+    "comma-dangle": 1,
+    "quotes": [1, "single"],
+    "no-undef": 1,
+    "global-strict": 0,
+    "no-extra-semi": 1,
+    "no-underscore-dangle": 0,
+    "no-console": 0,
+    "no-unused-vars": 0,
+    "no-constant-condition": 0,
+    "no-trailing-spaces": [1, { "skipBlankLines": true }],
+    "no-unreachable": 1,
+    "no-alert": 0,
+    "react/jsx-uses-react": 1,
+    "no-unused-vars": [1, { "argsIgnorePattern": "^_" }],
+    "no-restricted-globals": ["error", "event"]
+  },
+  "globals": {
+    "SyntheticInputEvent": false,
+    "SyntheticKeyboardEvent": false,
+    "Generator": false,
+    "$Keys": false,
+    "SyntheticMouseEvent": false
+  }
+}

.flowconfig

@@ -0,0 +1,15 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.jsx
+module.file_ext=.scss
+module.file_ext=.less
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=common
+module.name_mapper='.*\.(css|less)$' -> 'empty/object'

.gitignore

@@ -0,0 +1,43 @@
+.idea
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Build
+dist
+
+# Runtime data
+pids
+*.pid
+*.seed
+# Python venv
+venv
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

.nvmrc

@@ -0,0 +1 @@
+8

.travis.yml

@@ -0,0 +1,18 @@
+dist: trusty
+sudo: required
+language: node_js
+
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+
+
+notifications:
+  email:
+    on_success: never
+    on_failure: never
+
+script:
+- npm run test
+- npm run flow

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:8.1.4
+
+WORKDIR /usr/app
+
+COPY package.json .
+RUN npm install --quiet
+
+COPY . .

README.md

@@ -1,2 +1,214 @@
-# MyEtherWallet
-MyEtherWallet (v4+)
+# MyEtherWallet V4+ (ALPHA - VISIT [V3](https://github.com/kvhnuke/etherwallet) for the production site)
+
+#### Run:
+
+```bash
+npm run dev # run app in dev mode
+```
+
+#### Build:
+
+```bash
+npm run build # build app
+```
+
+It generates app in `dist` folder.
+
+#### Test:
+
+```bash
+npm run test # run tests with Jest
+```
+
+#### Derivation Check:
+##### The derivation checker utility assumes that you have:
+1. Docker installed/available
+2. [dternyak/eth-priv-to-addr](https://hub.docker.com/r/dternyak/eth-priv-to-addr/) pulled from DockerHub
+
+##### Docker setup instructions:
+1. Install docker (on macOS, I suggest [Docker for Mac](https://docs.docker.com/docker-for-mac/))
+2. `docker pull dternyak/eth-priv-to-addr`
+
+##### Run Derivation Checker
+```bash
+npm run derivation-checker
+```
+
+## Folder structure:
+
+```
+│
+├── common - Your App
+│   ├── actions - application actions
+│   ├── api - Services and XHR utils(also custom form validation, see InputComponent from components/common)
+│   ├── components - components according to "Redux philosophy"
+│   ├── config - frontend config depending on REACT_WEBPACK_ENV
+│   ├── containers - containers according to "Redux philosophy"
+│   ├── reducers - application reducers
+│   ├── routing - application routing
+│   ├── index.jsx - entry
+│   ├── index.html
+├── static
+├── webpack_config - Webpack configuration
+├── jest_config - Jest configuration
+```
+
+## Docker setup
+You should already have docker and docker-compose setup for your platform as a pre-req.
+
+```bash
+docker-compose up
+```
+
+## Style Guides and Philosophies
+
+The following are guides for developers to follow for writing compliant code.
+
+
+
+### Redux and Actions
+
+Each reducer has one file in `reducers/[namespace].js` that contains the reducer
+and initial state, one file in `actions/[namespace].js` that contains the action
+creators and their return types, and optionally one file in
+`sagas/[namespace].js` that handles action side effects using
+[`redux-saga`](https://github.com/redux-saga/redux-saga).
+
+The files should be laid out as follows:
+
+#### Reducer
+
+* State should be explicitly defined and exported
+* Initial state should match state flow typing, define every key
+* Reducer function should handle all cases for actions. If state does not change
+as a result of an action (Because it merely kicks off side-effects in saga) then
+define the case above default, and have it fall through.
+
+```js
+// @flow
+import type { NamespaceAction } from "actions/namespace";
+
+export type State = { /* Flowtype definition for state object */ };
+export const INITIAL_STATE: State = { /* Initial state shape */ };
+
+export function namespace(
+	state: State = INITIAL_STATE,
+	action: NamespaceAction
+): State {
+	switch (action.type) {
+		case 'NAMESPACE_NAME_OF_ACTION':
+			return {
+				...state,
+				// Alterations to state
+			};
+
+		case 'NAMESPACE_NAME_OF_SAGA_ACTION':
+		default:
+			// Ensures every action was handled in reducer
+			// Unhandled actions should just fall into default
+			(action: empty);
+			return state;
+	}
+}
+```
+
+#### Actions
+
+* Define each action object type beside the action creator
+* Export a union of all of the action types for use by the reducer
+
+```js
+/*** Name of action ***/
+export type NameOfActionAction = {
+	type: 'NAMESPACE_NAME_OF_ACTION',
+	/* Rest of the action object shape */
+};
+
+export function nameOfAction(): NameOfActionAction {
+	return {
+		type: 'NAMESPACE_NAME_OF_ACTION',
+		/* Rest of the action object */
+	};
+};
+
+/*** Action Union ***/
+export type NamespaceAction =
+	| ActionOneAction
+	| ActionTwoAction
+	| ActionThreeAction;
+```
+
+#### Action Constants
+
+Action constants are not used thanks to flow type checking. To avoid typos, we
+use `(action: empty)` in the default case which assures every case is accounted
+for. If you need to use another reducer's action, import that action type into
+your reducer, and create a new action union of your actions, and the other
+action types used.
+
+
+
+
+### Styling
+
+Legacy styles are housed under `common/assets/styles` and written with LESS.
+However, going forward, each styled component should create a a `.scss` file of
+the same name in the same folder, and import it like so:
+
+```js
+import React from "react";
+
+import "./MyComponent.scss";
+
+export default class MyComponent extends React.component {
+	render() {
+		return (
+			<div className="MyComponent">
+				<div className="MyComponent-child">Hello!</div>
+			</div>
+		);
+	}
+}
+```
+
+These style modules adhere to [SuitCSS naming convention](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md):
+
+```scss
+.MyComponent {
+	/* Styles */
+
+	&-child {
+		/* Styles */
+
+		&.is-hidden {
+			display: none;
+		}
+	}
+}
+```
+
+All elements inside of a component should extend its parent class namespace, or
+create a new namespace (Potentially breaking that out into its own component.)
+
+Variables and mixins can be imported from the files in `common/styles`:
+
+```scss
+@import "sass/colors";
+
+code {
+	color: $code-color;
+}
+```
+
+#### Converting Styles
+
+When working on a module that has styling in Less, try to do the following:
+
+* Screenshot the component in question
+* Create a new SCSS file in the same directory
+* Remove styling from LESS file, convert it to the SCSS file (Mostly s/@/$)
+* Convert class names to SuitCSS naming convention
+* Convert any utility classes from `etherewallet-utilities.less` into mixins
+* Convert as many element selectors to class name selectors as possible
+* Convert as many `<br/>` tags or `&nbsp;`s to margins
+* Ensure that there has been little to no deviation from screenshot