From 30f63622ae6d3cd847dc496daac94c944313e70f Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Tue, 4 Sep 2018 11:56:06 +0200
Subject: [PATCH] Create basic readme discussing project's structur

---
 README.md | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 87 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 3341504c..ae2b91c2 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,90 @@
-# TREZOR Ethereum Wallet
+# TREZOR Wallet
+
+To install dependencies run `npm install` or `yarn`
+
+To start locally run `npm run dev` or `yarn run dev`
+
+To build the project run `npm run build` or `yarn run build`
+
+======================================
+
+## Project structure
+The project is divided into two parts - data that are used when compiling the project and data that aren't.
+
+All data that are used during compilation are stored inside the `src/` folder.
+
+### `src/` folder
+At the root of the `src/` folder are all files or folders that are shared.
+
+- `src/index.js` - root of the application
+- `src/views/` - contains all React `components` and `views`
+- `src/store/` - todo
+- `src/actions/` - todo
+- `src/reducers/` - todo
+- todo other folders/files?
+
+
+## Component
+Component is what you'd intuitively think it is. It's a regular React component (doesn't matter whether statefull or stateless).
+
+### **Global components**
+All global components are are stored in `src/views/components/` folder.
+Global components are such components that are shared across multiple different components or views.
+- For example there's a `Button` component that is used in both `ConnectDevice` and `AccountSend`. `ConnectDevice` and `AccountSend` are both placed accross different views so the `Button` component they're both using must be stored in the global `components` folder.
+
+### **Naming & structure convention**
+Each component has it's own folder. Name of the folder is same as is the name of the component (camel case and first letter is capitalized, e.g.: *MyComponent*).
+
+If you want to create multiple components of the same type you should put them into a common folder with a lowercase name like this `views/componets/type/MyComponent`.
+
+- For example there are different types of modals like `confirm` or `device`.
+Because the `confirm` and `device` modals are subtypes of modal the folder structure looks like this
+    ```
+    modals/confirm/Address
+    modals/confirm/SignTx
+    modals/device/Duplicate
+    ```
+    Where `Address`, `SignTx` and `Duplicate` are the actual modal components.
+
+Inside each component's folder is `index.js` file containing the actual component's code with following export at the end of the file `export default ComponentName;`
+
+There's only one render function per component's index file. If you need more renders you should probably create new component.
+
+Each component may contain other components in its own `components/` folder. Component's components may contain another components etc.
+
+
+## View
+The difference between `view` and `component` is rather semantical then technical.
+
+From the React's standpoint a view is just another component. So when is component a regular component and when is it a view?
+View components basically copy router structure and are composed either from view's own components or global components.
+
+### **Naming & structure convention**
+Both naming and structure conventions are similar to components conventions.
+Each view has its own folder in `views/` folder. Name of this folder is same as is the view's name (camel case and first letter is capitalized, e.g.: *MyView*).
+Inside the view's folder is always an `index.js` file containing view's code itself.
+
+View may contain own components inside view's folder - in the `components/` folder. One of the differences between a component and a view is that view can hav another views. Of course those views may have their own components and views, etc.
+
+```
+views/
+    MyView/
+            components/
+            views/
+            index.js
+    MyAnotherView/
+            components/
+            index.js
+```
+
+- For example there's a `Landing` component that is displayed if no device is detected. This view contains its own components in a `Landing/components/` folder. These components are then used exclusively in `Landing/index.js` and together compose different versions of the `Landing` view.
+
+<!-- If you aren't sure whether you should create component or view follow this discussion
+- If the route has following structure `/nameA/nameB/...` then `nameA` is probably a view and `nameB` is its subview
+- If the route has following structure `/nameA/:parameter/nameB/...` then `nameA` is a view
+    - If the are some elements -->
+
+
 
-npm install / yarn
 
-npm run dev / yarn run dev
 
-npm run build / yarn run build
\ No newline at end of file