![Alt text](trezor-rocks.png?raw=true "Trezor Wallet rocks")

# Trezor Wallet

You can try this wallet live [HERE](https://beta-wallet.trezor.io/next/)

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 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/components/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 have 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 -->


## trezor-connect
If you are implementing a new feature from 'trezor-connect' which is not deployed on npm yet follow these steps:

1. Build trezor-connect npm module locally:
- go to trezor-connect project
- call `yarn build:npm`
- `cd npm`
2. Call `yarn link` to register this module
3. go to trezor-wallet project
4. Call `yarn link trezor-connect` to link registered module with trezor-wallet

Additionally you can publish trezor-connect to dev server (sisyfos.trezor.io/connect):
1. go to trezor-connect project
2. call `make build-test`