1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-15 21:08:57 +00:00
Go to file
2019-03-12 18:34:32 +01:00
public sort networks 2019-03-06 14:49:55 +01:00
scripts echo build directory from docker-build 2018-10-24 23:35:48 +02:00
server Fix prod and beta local servers 2018-10-24 17:58:10 +02:00
src searchable currency select with dropDownIndicator enabled 2019-03-12 18:34:32 +01:00
test Fix unexpected import 2019-02-11 14:51:25 +01:00
translations fix msgs 2019-02-28 16:02:33 +01:00
webpack lint all files 2019-03-04 13:33:02 +01:00
.dockerignore Added scripts for easy run and build 2018-10-09 14:46:39 +02:00
.eslintignore do not lint cache on whole folder 2019-03-04 15:25:54 +01:00
.eslintrc Fixed lint 2019-03-06 16:44:47 +01:00
.flowconfig ignore flow errors in react-select 2019-03-01 12:40:51 +01:00
.gitignore update .gitignore 2019-02-28 15:03:07 +01:00
.gitlab-ci.yml merge beta 2019-03-06 14:10:39 +01:00
.prettierignore Add prettier ignore 2019-03-04 15:30:33 +01:00
.prettierrc Added config 2019-03-04 12:15:22 +01:00
.stylelintrc Fix stylelint rule 2019-03-06 15:49:12 +01:00
babel.config.js remove unused packages 2019-02-28 14:59:33 +01:00
browserslist Add error message for IE8 and lower 2018-09-21 16:54:02 +02:00
CHANGELOG.md release 1.1.1-beta 2019-03-06 13:47:52 +01:00
cypress.json Integration tests (#311) 2019-02-05 14:26:40 +01:00
Dockerfile Separate production and test docker 2019-03-04 16:29:11 +01:00
Dockerfile.test Separate production and test docker 2019-03-04 16:29:11 +01:00
jest.config.js Tweak config 2019-02-28 16:56:13 +01:00
jsconfig.json Removed /js folder 2018-08-27 17:15:22 +02:00
l10n.config.json handle locale to filename mapping by TTM 2019-02-15 21:19:01 +01:00
LICENSE.md fix format in license 2018-09-13 16:40:16 +02:00
Makefile Makefile: added "sync-" prefix and default goal with usage description 2018-10-26 11:50:31 +02:00
package.json removed unused dep 2019-03-06 16:22:00 +01:00
README.md rename image 2019-03-08 10:48:00 +01:00
yarn.lock removed unused dep 2019-03-06 16:19:15 +01:00

Alt text

Trezor Wallet

You can try this wallet live HERE

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.

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
  1. Call yarn link to register this module
  2. go to trezor-wallet project
  3. 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