Connor Bryan 04f75a6a27 Address Manager (#1657)
* Add a new route for AddressBook

* Further templating of the AddressBook view

* Add initial functionality to handle a table of existing address labels

* Make the linter happy

* Adjust paths

* Factor out TableRow and add common functionality

* Add initial Redux boilerplate for addressBook | fix minor linting issues

* Swap out terminology and types

* Connect up to Redux

* Connect data for AddressBookTable to Redux

* Use temporary fields for addition

* Remove alignment and index column

* Stopping point

* Adjust the sizing of rows to be consistent

* Initial implementation of a dropdown for the address field

* Minor styling to dropdown

* Stopping point

* Apply a focus concept onto the factory

* Add keyboard controls for the address field dropdown

* Adjust label of address field when it matches an addressBook entry

* Properly handle attempting to blur a non-existent component

* Minor styling changes on dropdown box

* Standardize address casing, add accessibility to dropdown

* Create an addressLabel component

* Pass refs correctly and fix some typings

* Exact version

* Add module name mapping for shared/keycodes

* addressBook reducer tests

* Add functionality to DeterministicModal

* Minor changes / Add test for addressBook selectors

* Move out AddressBookTable to a component

* Typing, translation and restructuring

* More typing and translation fixes

* More linting fixes

* More type changes

* Variable name for dropdown background

* Fix TS type errors, lint errors, remove unused props

* Used a different selector and removed method: AddressBookTable

* Linter was mad

* Linter mad again :(

* Add a translation and adjust styling of AddressBookTable

* Move the onBlur to a class method

* Prevent the default behavior of up/down/enter for dropdown

* Let's do it this way instead

* Adjust the styling on DeterministicWalletModal labels

* Change `AddressBookTable` into a pseudo-table using section and div

* Use readable keys vs. keycodes

* Put the dropdown in InputFactory and position it correctly

* Sanitation of label adding and changing

* Prevent duplicate labels in AddressBook and Row

* Add a box shadow and use `invalid` class insted of custom

* Use emphasis vs strong for address in dropdown

* Display the label undernearth the input vs. changing it

* Isolate AccountAddress into its own component

* Introduce interactivity to AccountAddress

* Fully incorporate with Redux

* Validation for AccountAddress

* Add validation notifications for address field on AddressBookTable

* Minor formatting

* Adjust wrappage for optimal flexboxxing

* Make AddressBookTable responsive

* Show an invalid input in "real time" instead of only on submit

* Real time input validation for AddressBookTableRow

* Responsive-ize the To address dropdown

* Hide identicons instead at small enough screen sizes

* Fix repsonsiveness of dropdown further

* Fix responsiveness of table rows and inputs

* Truncate account info and switch identicons to the right for consistency

* Use classnames instead of targetting element directly for DWM

* Display a notice if the entered query doesnt match a label and isnt an addr

* Don't show an error on the To address if its a label entry

* Display an error under AddressBookTableRow in real time

* Display errors in real time for AddressBookTable temp inputs

* Add realtime validation to AccountAddress

* Ensure toChecksumAddress is used when entering labels to address manager

* Show errors even after blurring.

* Only show errors on address/label entry if they have been blurred

* On certain inputs, show an invalid input immediately

* Add displayed errors for labels with 0x and labels containing ens

* Move ENS checking validation out

* Add a saga for addLabelForAddress

* Completely revamp the redux side of Address Manager and test it all

* Adjust components to use new redux addressBook

* Incorporate new redux into AddressBookTableRow and clean up for linter

* Make linter and tests happy

* Another reduxy overhaul

* Still fixing it

* More redux updates

* Finalize redux stuff.

* Incorporate new reduxy way into AddressBookTable & Row

* Incorporate redux changes into Account Address

* Small tests fix

* Add and fix some selector tests

* Addressing Will's comments

* Shortened visibility class for line length reasons.
2018-05-21 18:10:51 -05:00
2018-02-11 20:59:06 -06:00
2018-05-21 18:10:51 -05:00
2018-05-21 13:39:03 -05:00
2018-05-21 18:10:51 -05:00
2018-02-06 22:28:28 -06:00
2018-04-05 21:08:46 -05:00
2018-04-12 23:50:36 -05:00
2018-01-29 12:24:20 -06:00
2018-03-21 22:50:25 -05:00
2018-02-06 22:28:28 -06:00
2018-05-21 18:10:51 -05:00
2018-05-11 10:15:32 -05:00
2018-05-21 13:39:03 -05:00
2018-05-21 18:10:51 -05:00

MyCrypto Web & Desktop Apps

Greenkeeper badge Coverage Status

Running the App

This codebase targets Node 8.9.4 (LTS). After npm installing all dependencies (You may be required to install additional system dependencies, due to some node modules relying on them) you can run various commands depending on what you want to do:

Development

# run app in dev mode in browser, rebuild on file changes
npm run dev
# run app in dev mode in electron, rebuild on file changes
npm run dev:electron

Build Releases

# builds the production server app
npm run build
# builds the downloadable version of the site
npm run build:downloadable
# builds the electron apps
npm run build:electron

# builds only one OS's electron app
npm run build:electron:(osx|linux|windows)

All of these builds are output to a folder in dist/.

Unit Tests:

# run unit tests with Jest
npm run test

Integration Tests:

# run integration tests with Jest
npm run test:int

Dev (HTTPS):

Some parts of the site, such as the Ledger wallet, require an HTTPS environment to work. To develop on HTTPS, do the following:

  1. Create your own SSL Certificate (Heroku has a nice guide here)
  2. Move the .key and .crt files into webpack_config/server.*
  3. Run the following command:
npm run dev:https

Address Derivation Checker:

EthereumJS-Util previously contained a bug that would incorrectly derive addresses from private keys with a 1/128 probability of occurring. A summary of this issue can be found here.

As a reactionary measure, the address derivation checker was created.

To test for correct address derivation, the address derivation checker uses multiple sources of address derivation (EthereumJS and PyEthereum) to ensure that multiple official implementations derive the same address for any given private key.

The derivation checker utility assumes that you have:
  1. Docker installed/available
  2. dternyak/eth-priv-to-addr pulled from DockerHub
Docker setup instructions:
  1. Install docker (on macOS, Docker for Mac is suggested)
  2. docker pull dternyak/eth-priv-to-addr
Run Derivation Checker

The derivation checker utility runs as part of the integration test suite.

npm run test:int

Folder structure:

│
├── common
│   ├── actions - Application actions
│   ├── api - Services and XHR utils
│   ├── assets - Images, fonts, etc.
│   ├── components - Components according to "Redux philosophy"
│   ├── config - Various config data and hard-coded json
│   ├── containers - Containers according to "Redux philosophy"
│   ├── libs - Framework-agnostic libraries and business logic
│   ├── reducers - Redux reducers
│   ├── sagas - Redux sagas
│   ├── sass - SCSS styles, variables, mixins
│   ├── selectors - Redux selectors
│   ├── translations - Language JSON dictionaries
│   ├── typescript - Typescript definition files
│   ├── utils - Common use utility functions
│   ├── index.tsx - Entry point for app
│   ├── index.html - Html template file for html-webpack-plugin
│   ├── Root.tsx - Root component for React
│   └── store.ts - Redux reducer combiner and middleware injector
├── electron-app - Code for the native electron app
├── jest_config - Jest testing configuration
├── spec - Jest unit tests, mirror's common's structure
├── static - Files that don't get compiled, just moved to build
└── webpack_config - Webpack configuration

More information is available on the Wiki Pages

Thanks & Support

Cross browser testing and debugging provided by the very lovely team at BrowserStack.

Description
MyCrypto is an open-source, client-side tool for generating ether wallets, handling ERC-20 tokens, and interacting with the blockchain more easily.
https://mycrypto.com
Readme MIT
Languages
TypeScript 88.1%
CSS 9.4%
JavaScript 1.7%
HTML 0.8%