m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge branch 'master' into i3033-responsive-newui-onboarding

Browse Source
This commit is contained in:
kumavis 2018-03-13 10:46:14 -07:00 committed by GitHub
commit 572234e383
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 24204 additions and 949 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
.circleci/config.yml Normal file
View File

@ -0,0 +1,202 @@
version: 2
workflows:
version: 2
full_test:
jobs:
- prep-deps-npm
- prep-deps-firefox
- prep-scss:
requires:
- prep-deps-npm
- test-lint:
requires:
- prep-deps-npm
- test-unit:
requires:
- prep-deps-npm
- test-integration-mascara-chrome:
requires:
- prep-deps-npm
- prep-scss
- test-integration-mascara-firefox:
requires:
- prep-deps-npm
- prep-deps-firefox
- prep-scss
- test-integration-flat-chrome:
requires:
- prep-deps-npm
- prep-scss
- test-integration-flat-firefox:
requires:
- prep-deps-npm
- prep-deps-firefox
- prep-scss
jobs:
prep-deps-npm:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Install deps via npm
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
paths:
- node_modules
prep-deps-firefox:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- run:
name: Download Firefox
command: >
wget https://ftp.mozilla.org/pub/firefox/releases/58.0/linux-x86_64/en-US/firefox-58.0.tar.bz2
&& tar xjf firefox-58.0.tar.bz2
- save_cache:
key: dependency-cache-firefox-{{ .Revision }}
paths:
- firefox
prep-scss:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- run:
name: Build for integration tests
command: npm run test:integration:build
- save_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
paths:
- ui/app/css/output
test-lint:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Test
command: npm run lint
test-unit:
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: test:coverage
command: npm run test:coverage
test-integration-flat-firefox:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-firefox-{{ .Revision }}
- run:
name: Install firefox
command: >
sudo rm -r /opt/firefox
&& sudo mv firefox /opt/firefox58
&& sudo mv /usr/bin/firefox /usr/bin/firefox-old
&& sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:flat
command: npm run test:flat
test-integration-flat-chrome:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:flat
command: npm run test:flat
test-integration-mascara-firefox:
environment:
browsers: '["Firefox"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-firefox-{{ .Revision }}
- run:
name: Install firefox
command: >
sudo rm -r /opt/firefox
&& sudo mv firefox /opt/firefox58
&& sudo mv /usr/bin/firefox /usr/bin/firefox-old
&& sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:mascara
command: npm run test:mascara
test-integration-mascara-chrome:
environment:
browsers: '["Chrome"]'
docker:
- image: circleci/node:8-browsers
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: Get Scss Cache key
# this allows us to checksum against a whole directory
command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
- restore_cache:
key: scss-cache-{{ checksum "scss_checksum" }}
- run:
name: test:integration:mascara
command: npm run test:mascara

3
.gitignore vendored
View File

@ -1,6 +1,5 @@
npm-debug.log
node_modules
package-lock.json
app/bower_components
test/bower_components
@ -32,4 +31,4 @@ ui/app/css/output/
notes.txt
.coveralls.yml
.nyc_output
.nyc_output

3
.nsprc Normal file
View File

@ -0,0 +1,3 @@
{
"exceptions": ["https://nodesecurity.io/advisories/566"]
}

1
CHANGELOG.md
View File

@ -1,6 +1,7 @@
# Changelog
## Current Master
- Fix flashing to Log in screen after logging in or restoring from seed phrase.
## 4.2.0 Tue Mar 06 2018

4
app/scripts/controllers/transactions.js
View File

@ -3,7 +3,7 @@ const ObservableStore = require('obs-store')
const ethUtil = require('ethereumjs-util')
const Transaction = require('ethereumjs-tx')
const EthQuery = require('ethjs-query')
const TransactionStateManger = require('../lib/tx-state-manager')
const TransactionStateManager = require('../lib/tx-state-manager')
const TxGasUtil = require('../lib/tx-gas-utils')
const PendingTransactionTracker = require('../lib/pending-tx-tracker')
const createId = require('../lib/random-id')
@ -38,7 +38,7 @@ module.exports = class TransactionController extends EventEmitter {
this.query = new EthQuery(this.provider)
this.txGasUtil = new TxGasUtil(this.provider)
this.txStateManager = new TransactionStateManger({
this.txStateManager = new TransactionStateManager({
initState: opts.initState,
txHistoryLimit: opts.txHistoryLimit,
getNetwork: this.getNetwork.bind(this),

48
app/scripts/lib/seed-phrase-verifier.js Normal file
View File

@ -0,0 +1,48 @@
const KeyringController = require('eth-keyring-controller')
const seedPhraseVerifier = {
// Verifies if the seed words can restore the accounts.
//
// The seed words can recreate the primary keyring and the accounts belonging to it.
// The created accounts in the primary keyring are always the same.
// The keyring always creates the accounts in the same sequence.
verifyAccounts (createdAccounts, seedWords) {
return new Promise((resolve, reject) => {
if (!createdAccounts || createdAccounts.length < 1) {
return reject(new Error('No created accounts defined.'))
}
const keyringController = new KeyringController({})
const Keyring = keyringController.getKeyringClassForType('HD Key Tree')
const opts = {
mnemonic: seedWords,
numberOfAccounts: createdAccounts.length,
}
const keyring = new Keyring(opts)
keyring.getAccounts()
.then((restoredAccounts) => {
log.debug('Created accounts: ' + JSON.stringify(createdAccounts))
log.debug('Restored accounts: ' + JSON.stringify(restoredAccounts))
if (restoredAccounts.length !== createdAccounts.length) {
// this should not happen...
return reject(new Error('Wrong number of accounts'))
}
for (let i = 0; i < restoredAccounts.length; i++) {
if (restoredAccounts[i].toLowerCase() !== createdAccounts[i].toLowerCase()) {
return reject(new Error('Not identical accounts! Original: ' + createdAccounts[i] + ', Restored: ' + restoredAccounts[i]))
}
}
return resolve()
})
})
},
}
module.exports = seedPhraseVerifier

2
app/scripts/lib/tx-state-manager.js
View File

@ -4,7 +4,7 @@ const ObservableStore = require('obs-store')
const ethUtil = require('ethereumjs-util')
const txStateHistoryHelper = require('./tx-state-history-helper')
module.exports = class TransactionStateManger extends EventEmitter {
module.exports = class TransactionStateManager extends EventEmitter {
constructor ({ initState, txHistoryLimit, getNetwork }) {
super()

53
app/scripts/metamask-controller.js
View File

@ -37,6 +37,7 @@ const version = require('../manifest.json').version
const BN = require('ethereumjs-util').BN
const GWEI_BN = new BN('1000000000')
const percentile = require('percentile')
const seedPhraseVerifier = require('./lib/seed-phrase-verifier')
module.exports = class MetamaskController extends EventEmitter {
@ -344,6 +345,7 @@ module.exports = class MetamaskController extends EventEmitter {
// primary HD keyring management
addNewAccount: nodeify(this.addNewAccount, this),
placeSeedWords: this.placeSeedWords.bind(this),
verifySeedPhrase: nodeify(this.verifySeedPhrase, this),
clearSeedWordCache: this.clearSeedWordCache.bind(this),
resetAccount: this.resetAccount.bind(this),
importAccountWithStrategy: this.importAccountWithStrategy.bind(this),
@ -565,14 +567,18 @@ module.exports = class MetamaskController extends EventEmitter {
// Opinionated Keyring Management
//
async addNewAccount (cb) {
async addNewAccount () {
const primaryKeyring = this.keyringController.getKeyringsByType('HD Key Tree')[0]
if (!primaryKeyring) return cb(new Error('MetamaskController - No HD Key Tree found'))
if (!primaryKeyring) {
throw new Error('MetamaskController - No HD Key Tree found')
}
const keyringController = this.keyringController
const oldAccounts = await keyringController.getAccounts()
const keyState = await keyringController.addNewAccount(primaryKeyring)
const newAccounts = await keyringController.getAccounts()
await this.verifySeedPhrase()
newAccounts.forEach((address) => {
if (!oldAccounts.includes(address)) {
this.preferencesController.setSelectedAddress(address)
@ -587,14 +593,43 @@ module.exports = class MetamaskController extends EventEmitter {
// Used when creating a first vault, to allow confirmation.
// Also used when revealing the seed words in the confirmation view.
placeSeedWords (cb) {
this.verifySeedPhrase()
.then((seedWords) => {
this.configManager.setSeedWords(seedWords)
return cb(null, seedWords)
})
.catch((err) => {
return cb(err)
})
}
// Verifies the current vault's seed words if they can restore the
// accounts belonging to the current vault.
//
// Called when the first account is created and on unlocking the vault.
async verifySeedPhrase () {
const primaryKeyring = this.keyringController.getKeyringsByType('HD Key Tree')[0]
if (!primaryKeyring) return cb(new Error('MetamaskController - No HD Key Tree found'))
primaryKeyring.serialize()
.then((serialized) => {
const seedWords = serialized.mnemonic
this.configManager.setSeedWords(seedWords)
cb(null, seedWords)
})
if (!primaryKeyring) {
throw new Error('MetamaskController - No HD Key Tree found')
}
const serialized = await primaryKeyring.serialize()
const seedWords = serialized.mnemonic
const accounts = await primaryKeyring.getAccounts()
if (accounts.length < 1) {
throw new Error('MetamaskController - No accounts found')
}
try {
await seedPhraseVerifier.verifyAccounts(accounts, seedWords)
return seedWords
} catch (err) {
log.error(err.message)
throw err
}
}
// ClearSeedWordCache

17
circle.yml
View File

@ -1,17 +0,0 @@
machine:
node:
version: 8.1.4
test:
override:
- "npm test"
dependencies:
pre:
- sudo apt-get update
# get latest stable firefox
- sudo apt-get install firefox
- firefox_cmd=`which firefox`; sudo rm -f $firefox_cmd; sudo ln -s `which firefox.ubuntu` $firefox_cmd
# get latest stable chrome
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
- sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
- sudo apt-get update
- sudo apt-get install google-chrome-stable

31
development/genStates.js
View File

@ -1,18 +1,21 @@
const fs = require('fs')
const path = require('path')
const { promisify } = require('util')
const statesPath = path.join(__dirname, 'states')
const stateNames = fs.readdirSync(statesPath)
start().catch(console.error)
const states = stateNames.reduce((result, stateFileName) => {
const statePath = path.join(__dirname, 'states', stateFileName)
const stateFile = fs.readFileSync(statePath).toString()
const state = JSON.parse(stateFile)
result[stateFileName.split('.')[0].replace(/-/g, ' ', 'g')] = state
return result
}, {})
const result = `module.exports = ${JSON.stringify(states)}`
const statesJsonPath = path.join(__dirname, 'states.js')
fs.writeFileSync(statesJsonPath, result)
async function start () {
const statesPath = path.join(__dirname, 'states')
const stateFilesNames = await promisify(fs.readdir)(statesPath)
const states = {}
await Promise.all(stateFilesNames.map(async (stateFileName) => {
const stateFilePath = path.join(__dirname, 'states', stateFileName)
const stateFileContent = await promisify(fs.readFile)(stateFilePath, 'utf8')
const state = JSON.parse(stateFileContent)
const stateName = stateFileName.split('.')[0].replace(/-/g, ' ', 'g')
states[stateName] = state
}))
const generatedFileContent = `module.exports = ${JSON.stringify(states)}`
const generatedFilePath = path.join(__dirname, 'states.js')
await promisify(fs.writeFile)(generatedFilePath, generatedFileContent)
}

23
mock-dev.js → development/mock-dev.js
View File

@ -15,17 +15,16 @@
const extend = require('xtend')
const render = require('react-dom').render
const h = require('react-hyperscript')
const pipe = require('mississippi').pipe
const Root = require('./ui/app/root')
const configureStore = require('./ui/app/store')
const actions = require('./ui/app/actions')
const states = require('./development/states')
const backGroundConnectionModifiers = require('./development/backGroundConnectionModifiers')
const Selector = require('./development/selector')
const MetamaskController = require('./app/scripts/metamask-controller')
const firstTimeState = require('./app/scripts/first-time-state')
const ExtensionPlatform = require('./app/scripts/platforms/extension')
const extension = require('./development/mockExtension')
const Root = require('../ui/app/root')
const configureStore = require('../ui/app/store')
const actions = require('../ui/app/actions')
const states = require('./states')
const backGroundConnectionModifiers = require('./backGroundConnectionModifiers')
const Selector = require('./selector')
const MetamaskController = require('../app/scripts/metamask-controller')
const firstTimeState = require('../app/scripts/first-time-state')
const ExtensionPlatform = require('../app/scripts/platforms/extension')
const extension = require('./mockExtension')
const noop = function () {}
const log = require('loglevel')
@ -52,7 +51,7 @@ function updateQueryParams(newView) {
// CSS
//
const MetaMaskUiCss = require('./ui/css')
const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css')
//

10
ui-dev.js → development/ui-dev.js
View File

@ -17,10 +17,10 @@
const render = require('react-dom').render
const h = require('react-hyperscript')
const Root = require('./ui/app/root')
const configureStore = require('./development/uiStore')
const states = require('./development/states')
const Selector = require('./development/selector')
const Root = require('../ui/app/root')
const configureStore = require('./uiStore')
const states = require('./states')
const Selector = require('./selector')
// logger
const log = require('loglevel')
@ -35,7 +35,7 @@ const firstState = states[selectedView]
updateQueryParams(selectedView)
// CSS
const MetaMaskUiCss = require('./ui/css')
const MetaMaskUiCss = require('../ui/css')
const injectCss = require('inject-css')

56
mascara/src/app/first-time/index.css
View File

@ -1,3 +1,10 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
.first-time-flow {
width: 100vw;
@ -6,6 +13,8 @@
display: flex;
justify-content: center;
flex: 1 0 auto;
font-weight: 400;
font-family: Roboto;
}
.alpha-warning,
@ -248,11 +257,11 @@
color: #1B344D;
font-size: 16px;
line-height: 23px;
font-family: Montserrat UltraLight;
font-family: Roboto;
}
.buy-ether__small-body-text {
font-family: Montserrat UltraLight;
font-family: Roboto;
height: 14px;
color: #757575;
font-size: 12px;
@ -280,7 +289,7 @@
height: 334px;
overflow-y: auto;
color: #757575;
font-family: Montserrat UltraLight;
font-family: Roboto;
font-size: 12px;
line-height: 15px;
text-align: justify;
@ -305,7 +314,7 @@
color: #5B5D67;
font-size: 16px;
line-height: 23px;
font-family: Montserrat UltraLight;
font-family: Roboto;
}
.backup-phrase__secret {
@ -323,7 +332,7 @@
.backup-phrase__secret-words {
width: 310px;
color: #5B5D67;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 20px;
line-height: 26px;
text-align: center;
@ -352,7 +361,7 @@
background: none;
box-shadow: none;
color: #FFFFFF;
font-family: Montserrat Regular;
font-family: Roboto;
font-size: 12px;
font-weight: bold;
line-height: 15px;
@ -406,7 +415,7 @@ button.backup-phrase__reveal-button:hover {
.backup-phrase__confirm-seed-option {
color: #5B5D67;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
background-color: #E7E7E7;
@ -428,7 +437,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__faq-link {
font-size: 18px;
line-height: 23px;
font-family: Montserrat Light;
font-family: Roboto;
}
.import-account__selector-label {
@ -443,7 +452,7 @@ button.backup-phrase__confirm-seed-option:hover {
background-color: #FFFFFF;
margin-top: 14px;
color: #5B5D67;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 18px;
line-height: 23px;
padding: 14px 21px;
@ -458,7 +467,7 @@ button.backup-phrase__confirm-seed-option:hover {
font-size: 18px;
line-height: 23px;
margin-top: 21px;
font-family: Montserrat UltraLight;
font-family: Roboto;
}
.import-account__input-wrapper {
@ -504,7 +513,7 @@ button.backup-phrase__confirm-seed-option:hover {
border: 1px solid #1B344D;
border-radius: 4px;
color: #1B344D;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 18px;
display: flex;
flex-flow: column nowrap;
@ -521,7 +530,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__file-name {
color: #000000;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 18px;
line-height: 23px;
margin-left: 22px;
@ -542,7 +551,7 @@ button.backup-phrase__confirm-seed-option:hover {
.buy-ether__content-headline {
color: #1B344D;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 18px;
line-height: 23px;
}
@ -571,7 +580,7 @@ button.backup-phrase__confirm-seed-option:hover {
align-items: center;
padding: 20px 0;
color: #9B9B9B;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 14px;
line-height: 18px;
cursor: pointer;
@ -606,7 +615,7 @@ button.backup-phrase__confirm-seed-option:hover {
.buy-ether__button-separator-text {
font-size: 20px;
line-height: 26px;
font-family: Montserrat Light;
font-family: Roboto;
margin: 35px 0 14px 30px;
display: flex;
flex-flow: column nowrap;
@ -618,7 +627,7 @@ button.backup-phrase__confirm-seed-option:hover {
color: #1B344D !important;
font-size: 14px !important;
line-height: 18px !important;
font-family: Montserrat UltraLight !important;
font-family: Roboto;
}
.buy-ether__action-content-wrapper {
@ -652,6 +661,7 @@ button.backup-phrase__confirm-seed-option:hover {
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
font-family: Roboto;
line-height: 26px;
text-align: center;
text-transform: uppercase;
@ -676,7 +686,7 @@ button.first-time-flow__button:hover {
color: #1B344D;
font-size: 20px;
line-height: 26px;
font-family: Montserrat Light;
font-family: Roboto;
text-align: center;
margin: 35px 0 14px;
background-color: transparent;
@ -728,7 +738,7 @@ button.first-time-flow__button--tertiary:hover {
font-size: 20px;
line-height: 26px;
text-align: center;
font-family: Montserrat UltraLight;
font-family: Roboto;
}
.icon {
@ -776,7 +786,7 @@ button.first-time-flow__button--tertiary:hover {
.shapeshift-form__deposit-instruction {
color: #757575;
color: rgba(0, 0, 0, 0.45);
font-family: Montserrat Light;
font-family: Roboto;
font-weight: 300;
line-height: 19px;
padding-bottom: 6px;
@ -793,7 +803,7 @@ button.first-time-flow__button--tertiary:hover {
width: 100%;
height: 45px;
line-height: 44px;
font-family: Montserrat Light;
font-family: Roboto;
}
.shapeshift-form__address-input-label {
@ -802,7 +812,7 @@ button.first-time-flow__button--tertiary:hover {
font-weight: 500;
line-height: 18px;
padding-bottom: 6px;
font-family: Montserrat Light;
font-family: Roboto;
}
.shapeshift-form__address-input {
@ -821,7 +831,7 @@ button.first-time-flow__button--tertiary:hover {
.shapeshift-form__address-input-error-message {
color: #FF001F;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 12px;
height: 24px;
line-height: 18px;
@ -831,7 +841,7 @@ button.first-time-flow__button--tertiary:hover {
display: flex;
flex-flow: row wrap;
color: #9B9B9B;
font-family: Montserrat Light;
font-family: Roboto;
font-size: 10px;
line-height: 16px;
}

188
old-ui/app/accounts/import/json.js
View File

@ -1,100 +1,122 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../../../../ui/app/actions')
const FileInput = require('react-simple-file-input').default
const PropTypes = require('prop-types')
const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file'
module.exports = connect(mapStateToProps)(JsonImportSubview)
class JsonImportSubview extends Component {
constructor (props) {
super(props)
function mapStateToProps (state) {
this.state = {
file: null,
fileContents: '',
}
}
render () {
const { error } = this.props
return (
h('div', {
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px 15px 0px 15px',
},
}, [
h('p', 'Used by a variety of different clients'),
h('a.warning', {
href: HELP_LINK,
target: '_blank',
}, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 20px',
fontSize: '15px',
},
}),
h('input.large-input.letter-spacey', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
style: {
width: 260,
marginTop: 12,
},
}),
h('button.primary', {
onClick: this.createNewKeychain.bind(this),
style: {
margin: 12,
},
}, 'Import'),
error ? h('span.error', error) : null,
])
)
}
onLoad (event, file) {
this.setState({file: file, fileContents: event.target.result})
}
createKeyringOnEnter (event) {
if (event.key === 'Enter') {
event.preventDefault()
this.createNewKeychain()
}
}
createNewKeychain () {
const { fileContents } = this.state
if (!fileContents) {
const message = 'You must select a file to import.'
return this.props.displayWarning(message)
}
const passwordInput = document.getElementById('json-password-box')
const password = passwordInput.value
if (!password) {
const message = 'You must enter a password for the selected file.'
return this.props.displayWarning(message)
}
this.props.importNewAccount([ fileContents, password ])
}
}
JsonImportSubview.propTypes = {
error: PropTypes.string,
displayWarning: PropTypes.func,
importNewAccount: PropTypes.func,
}
const mapStateToProps = state => {
return {
error: state.appState.warning,
}
}
inherits(JsonImportSubview, Component)
function JsonImportSubview () {
Component.call(this)
}
JsonImportSubview.prototype.render = function () {
const { error } = this.props
return (
h('div', {
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px 15px 0px 15px',
},
}, [
h('p', 'Used by a variety of different clients'),
h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 20px',
fontSize: '15px',
},
}),
h('input.large-input.letter-spacey', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
style: {
width: 260,
marginTop: 12,
},
}),
h('button.primary', {
onClick: this.createNewKeychain.bind(this),
style: {
margin: 12,
},
}, 'Import'),
error ? h('span.error', error) : null,
])
)
}
JsonImportSubview.prototype.onLoad = function (event, file) {
this.setState({file: file, fileContents: event.target.result})
}
JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
if (event.key === 'Enter') {
event.preventDefault()
this.createNewKeychain()
const mapDispatchToProps = dispatch => {
return {
goHome: () => dispatch(actions.goHome()),
displayWarning: warning => dispatch(actions.displayWarning(warning)),
importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
}
}
JsonImportSubview.prototype.createNewKeychain = function () {
const state = this.state
const { fileContents } = state
if (!fileContents) {
const message = 'You must select a file to import.'
return this.props.dispatch(actions.displayWarning(message))
}
const passwordInput = document.getElementById('json-password-box')
const password = passwordInput.value
if (!password) {
const message = 'You must enter a password for the selected file.'
return this.props.dispatch(actions.displayWarning(message))
}
this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)

22241
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@ -6,8 +6,8 @@
"scripts": {
"start": "npm run dev",
"dev": "gulp dev --debug",
"ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
"watch": "mocha watch --recursive \"test/unit/**/*.js\"",
"mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server",
"dist": "npm run dist:clear && npm install && gulp dist",
@ -15,14 +15,15 @@
"test": "npm run lint && npm run test:coverage && npm run test:integration",
"test:unit": "METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
"test:single": "METAMASK_ENV=test mocha --require test/helper.js",
"test:integration": "gulp build:scss && npm run test:flat && npm run test:mascara",
"test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara",
"test:integration:build": "gulp build:scss",
"test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
"test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
"test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
"test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests",
"test:flat:build:tests": "node test/integration/index.js",
"test:flat:build:states": "node development/genStates.js",
"test:flat:build:ui": "npm run test:flat:build:states && browserify ./mock-dev.js -o ./development/bundle.js",
"test:flat:build:ui": "npm run test:flat:build:states && browserify ./development/mock-dev.js -o ./development/bundle.js",
"test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js",
"test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests",
"test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js",
@ -105,7 +106,7 @@
"fast-levenshtein": "^2.0.6",
"fuse.js": "^3.2.0",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-eslint": "^4.0.0",
"gulp-sass": "^3.1.0",
"hat": "0.0.3",
@ -125,7 +126,6 @@
"loglevel": "^1.4.1",
"metamascara": "^2.0.0",
"metamask-logo": "^2.1.2",
"mississippi": "^1.2.0",
"mkdirp": "^0.5.1",
"multiplex": "^6.7.0",
"number-to-bn": "^1.7.0",
@ -139,7 +139,7 @@
"post-message-stream": "^3.0.0",
"promise-filter": "^1.1.0",
"promise-to-callback": "^1.0.0",
"pump": "^1.0.2",
"pump": "^3.0.0",
"pumpify": "^1.3.4",
"qrcode-npm": "0.0.3",
"ramda": "^0.24.1",
@ -189,7 +189,7 @@
"babelify": "^8.0.0",
"beefy": "^2.1.5",
"brfs": "^1.4.3",
"browserify": "^14.4.0",
"browserify": "^16.1.1",
"chai": "^4.1.0",
"compression": "^1.7.1",
"coveralls": "^3.0.0",
@ -212,7 +212,7 @@
"gulp-replace": "^0.6.1",
"gulp-sourcemaps": "^2.6.0",
"gulp-stylefmt": "^1.1.0",
"gulp-stylelint": "^4.0.0",
"gulp-stylelint": "^7.0.0",
"gulp-uglify": "^3.0.0",
"gulp-uglify-es": "^1.0.1",
"gulp-util": "^3.0.7",
@ -222,7 +222,7 @@
"jsdom": "^11.1.0",
"jsdom-global": "^3.0.2",
"jshint-stylish": "~2.2.1",
"karma": "^1.7.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-firefox-launcher": "^1.0.1",
@ -244,7 +244,7 @@
"react-testutils-additions": "^15.2.0",
"redux-test-utils": "^0.2.2",
"sinon": "^4.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-config-standard": "^18.2.0",
"tape": "^4.5.1",
"testem": "^2.0.0",
"uglifyify": "^4.0.2",

4
test/base.conf.js
View File

@ -46,7 +46,9 @@ module.exports = function(config) {
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome', 'Firefox'],
browsers: process.env.browsers ?
JSON.parse(process.env.browsers)
: ['Chrome', 'Firefox'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits

2
test/integration/index.js
View File

@ -23,4 +23,4 @@ pump(
console.log(`Integration test build completed: "${bundlePath}"`)
process.exit(0)
}
)
)

73
test/integration/lib/add-token.js
View File

@ -1,4 +1,9 @@
const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
QUnit.module('Add token flow')
@ -13,74 +18,60 @@ QUnit.test('successful add token flow', (assert) => {
})
async function runAddTokenFlowTest (assert, done) {
const selectState = $('select')
const selectState = await queryAsync($, 'select')
selectState.val('add token')
reactTriggerChange(selectState[0])
await timeout(2000)
// Check that no tokens have been added
assert.ok($('.token-list-item').length === 0, 'no tokens added')
// Go to Add Token screen
let addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
let addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click()
await timeout(1000)
// Verify Add Token screen
let addTokenWrapper = $('.add-token__wrapper')
let addTokenWrapper = await queryAsync($, '.add-token__wrapper')
assert.ok(addTokenWrapper[0], 'add token wrapper renders')
let addTokenTitle = $('.add-token__title')
let addTokenTitle = await queryAsync($, '.add-token__title')
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// Cancel Add Token
const cancelAddTokenButton = $('button.btn-cancel.add-token__button')
const cancelAddTokenButton = await queryAsync($, 'button.btn-cancel.add-token__button')
assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
cancelAddTokenButton.click()
await timeout(1000)
assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
// Return to Add Token Screen
addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click()
await timeout(1000)
// Verify Add Token Screen
addTokenWrapper = $('.add-token__wrapper')
addTokenTitle = $('.add-token__title')
addTokenWrapper = await queryAsync($, '.add-token__wrapper')
addTokenTitle = await queryAsync($, '.add-token__title')
assert.ok(addTokenWrapper[0], 'add token wrapper renders')
assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
// Search for token
const searchInput = $('input.add-token__input')
const searchInput = await queryAsync($, 'input.add-token__input')
searchInput.val('a')
reactTriggerChange(searchInput[0])
await timeout()
// Click token to add
const tokenWrapper = $('div.add-token__token-wrapper')
const tokenWrapper = await queryAsync($, 'div.add-token__token-wrapper')
assert.ok(tokenWrapper[0], 'token found')
const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
const tokenImageUrl = tokenImageProp.slice(5, -2)
tokenWrapper[0].click()
await timeout()
// Click Next button
let nextButton = $('button.btn-clear.add-token__button')
let nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click()
await timeout()
// Confirm Add token
assert.equal(
$('.add-token__description')[0].textContent,
@ -90,47 +81,35 @@ async function runAddTokenFlowTest (assert, done) {
assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
$('button.btn-clear.add-token__button')[0].click()
await timeout(2000)
// Verify added token image
let heroBalance = $('.hero-balance')
let heroBalance = await queryAsync($, '.hero-balance')
assert.ok(heroBalance, 'rendered hero balance')
assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
// Return to Add Token Screen
addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
assert.ok(addTokenButton[0], 'add token button present')
addTokenButton[0].click()
await timeout(1000)
const addCustom = $('.add-token__add-custom')
const addCustom = await queryAsync($, '.add-token__add-custom')
assert.ok(addCustom[0], 'add custom token button present')
addCustom[0].click()
await timeout()
// Input token contract address
const customInput = $('input.add-token__add-custom-input')
const customInput = await queryAsync($, 'input.add-token__add-custom-input')
customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
reactTriggerChange(customInput[0])
await timeout(1000)
// Click Next button
nextButton = $('button.btn-clear.add-token__button')
nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click()
await timeout(1000)
// Verify symbol length error since contract address won't return symbol
const errorMessage = $('.add-token__add-custom-error-message')
const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
assert.ok(errorMessage[0], 'error rendered')
$('button.btn-cancel.add-token__button')[0].click()
await timeout(2000)
// // Confirm Add token
// assert.equal(
// $('.add-token__description')[0].textContent,
@ -141,13 +120,7 @@ async function runAddTokenFlowTest (assert, done) {
// $('button.btn-clear.add-token__button')[0].click()
// // Verify added token image
// heroBalance = $('.hero-balance')
// heroBalance = await queryAsync($, '.hero-balance')
// assert.ok(heroBalance, 'rendered hero balance')
// assert.ok(heroBalance.find('.identicon')[0], 'token added')
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

44
test/integration/lib/confirm-sig-requests.js
View File

@ -1,5 +1,9 @@
const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
const PASSWORD = 'password123'
QUnit.module('confirm sig requests')
@ -13,55 +17,41 @@ QUnit.test('successful confirmation of sig requests', (assert) => {
})
async function runConfirmSigRequestsTest(assert, done) {
let selectState = $('select')
let selectState = await queryAsync($, 'select')
selectState.val('confirm sig requests')
reactTriggerChange(selectState[0])
await timeout(2000)
let confirmSigHeadline = $('.request-signature__headline')
let confirmSigHeadline = await queryAsync($, '.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
let confirmSigRowValue = $('.request-signature__row-value')
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
let confirmSigSignButton = $('.request-signature__footer__sign-button')
let confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click()
await timeout(2000)
confirmSigHeadline = $('.request-signature__headline')
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
let confirmSigMessage = $('.request-signature__notice')
let confirmSigMessage = await queryAsync($, '.request-signature__notice')
assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
confirmSigRowValue = $('.request-signature__row-value')
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
confirmSigSignButton = $('.request-signature__footer__sign-button')
confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click()
await timeout(2000)
confirmSigHeadline = $('.request-signature__headline')
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
confirmSigRowValue = $('.request-signature__row-value')
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
assert.equal(confirmSigRowValue[1].textContent, '1337')
confirmSigSignButton = $('.request-signature__footer__sign-button')
confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
confirmSigSignButton[0].click()
await timeout(2000)
const txView = $('.tx-view')
const txView = await queryAsync($, '.tx-view')
assert.ok(txView[0], 'Should return to the account details screen after confirming')
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

80
test/integration/lib/first-time.js
View File

@ -1,6 +1,10 @@
const reactTriggerChange = require('react-trigger-change')
const PASSWORD = 'password123'
const runMascaraFirstTimeTest = require('./mascara-first-time')
const {
timeout,
findAsync,
} = require('../../lib/util')
QUnit.module('first time usage')
@ -21,20 +25,19 @@ async function runFirstTimeUsageTest(assert, done) {
selectState.val('first time')
reactTriggerChange(selectState[0])
await timeout(2000)
const app = $('#app-content')
// recurse notices
while (true) {
const button = app.find('button')
const button = await findAsync(app, 'button')
if (button.html() === 'Accept') {
// still notices to accept
const termsPage = app.find('.markdown')[0]
const termsPageRaw = await findAsync(app, '.markdown')
const termsPage = (await findAsync(app, '.markdown'))[0]
console.log('termsPageRaw', termsPageRaw)
termsPage.scrollTop = termsPage.scrollHeight
await timeout()
console.log('Clearing notice')
button.click()
await timeout()
} else {
// exit loop
console.log('No more notices...')
@ -42,97 +45,68 @@ async function runFirstTimeUsageTest(assert, done) {
}
}
await timeout()
// Scroll through terms
const title = app.find('h1')[0]
const title = (await findAsync(app, 'h1'))[0]
assert.equal(title.textContent, 'MetaMask', 'title screen')
// enter password
const pwBox = app.find('#password-box')[0]
const confBox = app.find('#password-box-confirm')[0]
const pwBox = (await findAsync(app, '#password-box'))[0]
const confBox = (await findAsync(app, '#password-box-confirm'))[0]
pwBox.value = PASSWORD
confBox.value = PASSWORD
await timeout()
// create vault
const createButton = app.find('button.primary')[0]
const createButton = (await findAsync(app, 'button.primary'))[0]
createButton.click()
await timeout(3000)
const created = app.find('h3')[0]
await timeout()
const created = (await findAsync(app, 'h3'))[0]
assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
// Agree button
const button = app.find('button')[0]
const button = (await findAsync(app, 'button'))[0]
assert.ok(button, 'button present')
button.click()
await timeout(1000)
const detail = app.find('.account-detail-section')[0]
const detail = (await findAsync(app, '.account-detail-section'))[0]
assert.ok(detail, 'Account detail section loaded.')
const sandwich = app.find('.sandwich-expando')[0]
const sandwich = (await findAsync(app, '.sandwich-expando'))[0]
sandwich.click()
await timeout()
const menu = app.find('.menu-droppo')[0]
const menu = (await findAsync(app, '.menu-droppo'))[0]
const children = menu.children
const logout = children[2]
assert.ok(logout, 'Lock menu item found')
logout.click()
await timeout(1000)
const pwBox2 = app.find('#password-box')[0]
const pwBox2 = (await findAsync(app, '#password-box'))[0]
pwBox2.value = PASSWORD
const createButton2 = app.find('button.primary')[0]
const createButton2 = (await findAsync(app, 'button.primary'))[0]
createButton2.click()
await timeout(1000)
const detail2 = app.find('.account-detail-section')[0]
const detail2 = (await findAsync(app, '.account-detail-section'))[0]
assert.ok(detail2, 'Account detail section loaded again.')
await timeout()
// open account settings dropdown
const qrButton = app.find('.fa.fa-ellipsis-h')[0]
const qrButton = (await findAsync(app, '.fa.fa-ellipsis-h'))[0]
qrButton.click()
await timeout(1000)
// qr code item
const qrButton2 = app.find('.dropdown-menu-item')[1]
const qrButton2 = (await findAsync(app, '.dropdown-menu-item'))[1]
qrButton2.click()
await timeout(1000)
const qrHeader = app.find('.qr-header')[0]
const qrContainer = app.find('#qr-container')[0]
const qrHeader = (await findAsync(app, '.qr-header'))[0]
const qrContainer = (await findAsync(app, '#qr-container'))[0]
assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
assert.ok(qrContainer, 'QR Container found')
await timeout()
const networkMenu = app.find('.network-indicator')[0]
const networkMenu = (await findAsync(app, '.network-indicator'))[0]
networkMenu.click()
await timeout()
const networkMenu2 = app.find('.network-indicator')[0]
const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
const children2 = networkMenu2.children
children2.length[3]
assert.ok(children2, 'All network options present')
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

94
test/integration/lib/mascara-first-time.js
View File

@ -1,119 +1,95 @@
const PASSWORD = 'password123'
const reactTriggerChange = require('react-trigger-change')
const {
timeout,
findAsync,
queryAsync,
} = require('../../lib/util')
async function runFirstTimeUsageTest (assert, done) {
await timeout(4000)
const app = $('#app-content')
const app = await queryAsync($, '#app-content')
await skipNotices(app)
await timeout()
// Scroll through terms
const title = app.find('.create-password__title').text()
const title = (await findAsync(app, '.create-password__title')).text()
assert.equal(title, 'Create Password', 'create password screen')
// enter password
const pwBox = app.find('.first-time-flow__input')[0]
const confBox = app.find('.first-time-flow__input')[1]
const pwBox = (await findAsync(app, '.first-time-flow__input'))[0]
const confBox = (await findAsync(app, '.first-time-flow__input'))[1]
pwBox.value = PASSWORD
confBox.value = PASSWORD
reactTriggerChange(pwBox)
reactTriggerChange(confBox)
await timeout()
// Create Password
const createButton = app.find('button.first-time-flow__button')[0]
const createButton = (await findAsync(app, 'button.first-time-flow__button'))[0]
createButton.click()
await timeout(3000)
const created = app.find('.unique-image__title')[0]
const created = (await findAsync(app, '.unique-image__title'))[0]
assert.equal(created.textContent, 'Your unique account image', 'unique image screen')
// Agree button
let button = app.find('button')[0]
let button = (await findAsync(app, 'button'))[0]
assert.ok(button, 'button present')
button.click()
await timeout(1000)
await skipNotices(app)
// secret backup phrase
const seedTitle = app.find('.backup-phrase__title')[0]
const seedTitle = (await findAsync(app, '.backup-phrase__title'))[0]
assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen')
app.find('.backup-phrase__reveal-button').click()
await timeout(1000)
const seedPhrase = app.find('.backup-phrase__secret-words').text().split(' ')
app.find('.first-time-flow__button').click()
;(await findAsync(app, '.backup-phrase__reveal-button')).click()
const seedPhrase = (await findAsync(app, '.backup-phrase__secret-words')).text().split(' ')
;(await findAsync(app, '.first-time-flow__button')).click()
await timeout()
const selectPhrase = text => {
const option = $('.backup-phrase__confirm-seed-option')
.filter((i, d) => d.textContent === text)[0]
$(option).click()
}
await timeout(1000)
seedPhrase.forEach(sp => selectPhrase(sp))
app.find('.first-time-flow__button').click()
await timeout(1000)
;(await findAsync(app, '.first-time-flow__button')).click()
// Deposit Ether Screen
const buyEthTitle = app.find('.buy-ether__title')[0]
const buyEthTitle = (await findAsync(app, '.buy-ether__title'))[0]
assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
app.find('.buy-ether__do-it-later').click()
await timeout(1000)
;(await findAsync(app, '.buy-ether__do-it-later')).click()
const menu = app.find('.account-menu__icon')[0]
const menu = (await findAsync(app, '.account-menu__icon'))[0]
menu.click()
await timeout()
const lock = app.find('.account-menu__logout-button')[0]
const lock = (await findAsync(app, '.account-menu__logout-button'))[0]
assert.ok(lock, 'Lock menu item found')
lock.click()
await timeout(1000)
const pwBox2 = app.find('#password-box')[0]
const pwBox2 = (await findAsync(app, '#password-box'))[0]
pwBox2.value = PASSWORD
const createButton2 = app.find('button.primary')[0]
const createButton2 = (await findAsync(app, 'button.primary'))[0]
createButton2.click()
await timeout(1000)
const detail2 = app.find('.wallet-view')[0]
const detail2 = (await findAsync(app, '.wallet-view'))[0]
assert.ok(detail2, 'Account detail section loaded again.')
await timeout()
// open account settings dropdown
const qrButton = app.find('.wallet-view__details-button')[0]
const qrButton = (await findAsync(app, '.wallet-view__details-button'))[0]
qrButton.click()
await timeout(1000)
const qrHeader = app.find('.editable-label__value')[0]
const qrContainer = app.find('.qr-wrapper')[0]
const qrHeader = (await findAsync(app, '.editable-label__value'))[0]
const qrContainer = (await findAsync(app, '.qr-wrapper'))[0]
assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
assert.ok(qrContainer, 'QR Container found')
await timeout()
const networkMenu = app.find('.network-component')[0]
const networkMenu = (await findAsync(app, '.network-component'))[0]
networkMenu.click()
await timeout()
const networkMenu2 = app.find('.network-indicator')[0]
const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
const children2 = networkMenu2.children
children2.length[3]
assert.ok(children2, 'All network options present')
@ -121,18 +97,12 @@ async function runFirstTimeUsageTest (assert, done) {
module.exports = runFirstTimeUsageTest
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}
async function skipNotices (app) {
while (true) {
const button = app.find('button')
const button = await findAsync(app, 'button')
if (button && button.html() === 'Accept') {
// still notices to accept
const termsPage = app.find('.markdown')[0]
const termsPage = (await findAsync(app, '.markdown'))[0]
if (!termsPage) {
break
}

129
test/integration/lib/send-new-ui.js
View File

@ -1,4 +1,9 @@
const reactTriggerChange = require('react-trigger-change')
const {
timeout,
queryAsync,
findAsync,
} = require('../../lib/util')
const PASSWORD = 'password123'
@ -18,83 +23,65 @@ global.ethQuery = {
async function runSendFlowTest(assert, done) {
console.log('*** start runSendFlowTest')
const selectState = $('select')
const selectState = await queryAsync($, 'select')
selectState.val('send new ui')
reactTriggerChange(selectState[0])
await timeout(2000)
const sendScreenButton = $('button.btn-clear.hero-balance-button')
const sendScreenButton = await queryAsync($, 'button.btn-clear.hero-balance-button')
assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click()
await timeout(1000)
const sendTitle = $('.page-container__title')
const sendTitle = await queryAsync($, '.page-container__title')
assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
const sendCopy = $('.page-container__subtitle')
const sendCopy = await queryAsync($, '.page-container__subtitle')
assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
const sendFromField = $('.send-v2__form-field')
const sendFromField = await queryAsync($, '.send-v2__form-field')
assert.ok(sendFromField[0], 'send screen has a from field')
let sendFromFieldItemAddress = $('.account-list-item__account-name')
let sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name')
assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name')
const sendFromFieldItem = $('.account-list-item')
const sendFromFieldItem = await queryAsync($, '.account-list-item')
sendFromFieldItem[0].click()
await timeout()
const sendFromDropdownList = $('.send-v2__from-dropdown__list')
// this seems to fail if the firefox window is not in focus...
const sendFromDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts')
console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromDropdownList.children()[1]`, sendFromDropdownList.children()[1]);
sendFromDropdownList.children()[1].click()
await timeout()
sendFromFieldItemAddress = $('.account-list-item__account-name')
console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromFieldItemAddress[0]`, sendFromFieldItemAddress[0]);
sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name')
assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name')
let sendToFieldInput = $('.send-v2__to-autocomplete__input')
let sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input')
sendToFieldInput[0].focus()
await timeout()
const sendToDropdownList = $('.send-v2__from-dropdown__list')
const sendToDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts')
sendToDropdownList.children()[2].click()
await timeout()
const sendToAccountAddress = sendToFieldInput.val()
assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address')
const sendAmountField = $('.send-v2__form-row:eq(2)')
const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)')
sendAmountField.find('.currency-display')[0].click()
await timeout()
const sendAmountFieldInput = sendAmountField.find('input:text')
const sendAmountFieldInput = await findAsync(sendAmountField, 'input:text')
sendAmountFieldInput.val('5.1')
reactTriggerChange(sendAmountField.find('input')[0])
await timeout()
let errorMessage = $('.send-v2__error')
let errorMessage = await queryAsync($, '.send-v2__error')
assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')
sendAmountFieldInput.val('2.0')
reactTriggerChange(sendAmountFieldInput[0])
await timeout()
errorMessage = $('.send-v2__error')
assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
const sendGasField = $('.send-v2__gas-fee-display')
const sendGasField = await queryAsync($, '.send-v2__gas-fee-display')
assert.equal(
sendGasField.find('.currency-display__input-wrapper > input').val(),
'0.000198',
@ -106,120 +93,86 @@ async function runSendFlowTest(assert, done) {
'send gas field should show estimated gas total converted to USD'
)
const sendGasOpenCustomizeModalButton = $('.send-v2__sliders-icon-container'
)
const sendGasOpenCustomizeModalButton = await queryAsync($, '.send-v2__sliders-icon-container')
sendGasOpenCustomizeModalButton[0].click()
await timeout(1000)
const customizeGasModal = $('.send-v2__customize-gas')
const customizeGasModal = await queryAsync($, '.send-v2__customize-gas')
assert.ok(customizeGasModal[0], 'should render the customize gas modal')
const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input')
const customizeGasPriceInput = (await queryAsync($, '.send-v2__gas-modal-card')).first().find('input')
customizeGasPriceInput.val(50)
reactTriggerChange(customizeGasPriceInput[0])
const customizeGasLimitInput = $('.send-v2__gas-modal-card').last().find('input')
const customizeGasLimitInput = (await queryAsync($, '.send-v2__gas-modal-card')).last().find('input')
customizeGasLimitInput.val(60000)
reactTriggerChange(customizeGasLimitInput[0])
await timeout()
const customizeGasSaveButton = $('.send-v2__customize-gas__save')
const customizeGasSaveButton = await queryAsync($, '.send-v2__customize-gas__save')
customizeGasSaveButton[0].click()
await timeout()
assert.equal(
sendGasField.find('.currency-display__input-wrapper > input').val(),
(await findAsync(sendGasField, '.currency-display__input-wrapper > input')).val(),
'0.003',
'send gas field should show customized gas total'
)
assert.equal(
sendGasField.find('.currency-display__converted-value')[0].textContent,
(await findAsync(sendGasField, '.currency-display__converted-value'))[0].textContent,
'3.60 USD',
'send gas field should show customized gas total converted to USD'
)
const sendButton = $('button.btn-clear.page-container__footer-button')
const sendButton = await queryAsync($, 'button.btn-clear.page-container__footer-button')
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
sendButton[0].click()
await timeout(2000)
await timeout()
selectState.val('send edit')
reactTriggerChange(selectState[0])
await timeout(2000)
const confirmFromName = $('.confirm-screen-account-name').first()
const confirmFromName = (await queryAsync($, '.confirm-screen-account-name')).first()
assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
const confirmToName = $('.confirm-screen-account-name').last()
const confirmToName = (await queryAsync($, '.confirm-screen-account-name')).last()
assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
const confirmScreenRows = $('.confirm-screen-rows')
const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2]
assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas')
const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3]
assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
const confirmScreenBackButton = $('.confirm-screen-back-button')
const confirmScreenBackButton = await queryAsync($, '.confirm-screen-back-button')
confirmScreenBackButton[0].click()
await timeout(1000)
const sendFromFieldItemInEdit = $('.account-list-item')
const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')
sendFromFieldItemInEdit[0].click()
await timeout()
const sendFromDropdownListInEdit = $('.send-v2__from-dropdown__list')
const sendFromDropdownListInEdit = await queryAsync($, '.send-v2__from-dropdown__list')
sendFromDropdownListInEdit.children()[2].click()
await timeout()
const sendToFieldInputInEdit = $('.send-v2__to-autocomplete__input')
const sendToFieldInputInEdit = await queryAsync($, '.send-v2__to-autocomplete__input')
sendToFieldInputInEdit[0].focus()
sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
await timeout()
const sendAmountFieldInEdit = $('.send-v2__form-row:eq(2)')
const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)')
sendAmountFieldInEdit.find('.currency-display')[0].click()
await timeout()
const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text')
sendAmountFieldInputInEdit.val('1.0')
reactTriggerChange(sendAmountFieldInputInEdit[0])
await timeout()
const sendButtonInEdit = $('.btn-clear.page-container__footer-button')
const sendButtonInEdit = await queryAsync($, '.btn-clear.page-container__footer-button')
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
sendButtonInEdit[0].click()
await timeout()
// TODO: Need a way to mock background so that we can test correct transition from editing to confirm
selectState.val('confirm new ui')
reactTriggerChange(selectState[0])
await timeout(2000)
const confirmScreenConfirmButton = $('.confirm-screen-confirm-button')
const confirmScreenConfirmButton = await queryAsync($, '.confirm-screen-confirm-button')
console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
confirmScreenConfirmButton[0].click()
await timeout(2000)
const txView = $('.tx-view')
const txView = await queryAsync($, '.tx-view')
console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
assert.ok(txView[0], 'Should return to the account details screen after confirming')
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}

53
test/lib/util.js Normal file
View File

@ -0,0 +1,53 @@
module.exports = {
timeout,
queryAsync,
findAsync,
pollUntilTruthy,
}
function timeout (time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time || 1500)
})
}
async function findAsync(container, selector, opts) {
try {
return await pollUntilTruthy(() => {
const result = container.find(selector)
if (result.length > 0) return result
}, opts)
} catch (err) {
throw new Error(`Failed to find element within interval: "${selector}"`)
}
}
async function queryAsync(jQuery, selector, opts) {
try {
return await pollUntilTruthy(() => {
const result = jQuery(selector)
if (result.length > 0) return result
}, opts)
} catch (err) {
throw new Error(`Failed to find element within interval: "${selector}"`)
}
}
async function pollUntilTruthy(fn, opts = {}){
const pollingInterval = opts.pollingInterval || 100
const timeoutInterval = opts.timeoutInterval || 5000
const start = Date.now()
let result
while (!result) {
// check if timedout
const now = Date.now()
if ((now - start) > timeoutInterval) {
throw new Error(`pollUntilTruthy - failed to return truthy within interval`)
}
// check for result
result = fn()
// run again after timeout
await timeout(pollingInterval, timeoutInterval)
}
return result
}

4
test/unit/message-manager-test.js
View File

@ -1,11 +1,11 @@
const assert = require('assert')
const MessageManger = require('../../app/scripts/lib/message-manager')
const MessageManager = require('../../app/scripts/lib/message-manager')
describe('Message Manager', function () {
let messageManager
beforeEach(function () {
messageManager = new MessageManger()
messageManager = new MessageManager()
})
describe('#getMsgList', function () {

10
test/unit/network-contoller-test.js
View File

@ -15,11 +15,8 @@ describe('# Network Controller', function () {
beforeEach(function () {
nock('https://api.infura.io')
.get('/*/')
.reply(200)
nock('https://rinkeby.infura.io')
.persist()
.post('/metamask')
.reply(200)
@ -29,6 +26,11 @@ describe('# Network Controller', function () {
networkController.initializeProvider(networkControllerProviderInit, provider)
})
afterEach(function () {
nock.cleanAll()
})
describe('network', function () {
describe('#provider', function () {
it('provider should be updatable without reassignment', function () {

133
test/unit/seed-phrase-verifier-test.js Normal file
View File

@ -0,0 +1,133 @@
const assert = require('assert')
const clone = require('clone')
const KeyringController = require('eth-keyring-controller')
const firstTimeState = require('../../app/scripts/first-time-state')
const seedPhraseVerifier = require('../../app/scripts/lib/seed-phrase-verifier')
const mockEncryptor = require('../lib/mock-encryptor')
describe('SeedPhraseVerifier', function () {
describe('verifyAccounts', function () {
let password = 'passw0rd1'
let hdKeyTree = 'HD Key Tree'
let keyringController
let vault
let primaryKeyring
beforeEach(async function () {
keyringController = new KeyringController({
initState: clone(firstTimeState),
encryptor: mockEncryptor,
})
assert(keyringController)
vault = await keyringController.createNewVaultAndKeychain(password)
primaryKeyring = keyringController.getKeyringsByType(hdKeyTree)[0]
})
it('should be able to verify created account with seed words', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let serialized = await primaryKeyring.serialize()
let seedWords = serialized.mnemonic
assert.notEqual(seedWords.length, 0)
let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
})
it('should be able to verify created account (upper case) with seed words', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let upperCaseAccounts = [createdAccounts[0].toUpperCase()]
let serialized = await primaryKeyring.serialize()
let seedWords = serialized.mnemonic
assert.notEqual(seedWords.length, 0)
let result = await seedPhraseVerifier.verifyAccounts(upperCaseAccounts, seedWords)
})
it('should be able to verify created account (lower case) with seed words', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let lowerCaseAccounts = [createdAccounts[0].toLowerCase()]
let serialized = await primaryKeyring.serialize()
let seedWords = serialized.mnemonic
assert.notEqual(seedWords.length, 0)
let result = await seedPhraseVerifier.verifyAccounts(lowerCaseAccounts, seedWords)
})
it('should return error with good but different seed words', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let serialized = await primaryKeyring.serialize()
let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
try {
let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
assert.fail("Should reject")
} catch (err) {
assert.ok(err.message.indexOf('Not identical accounts!') >= 0, 'Wrong error message')
}
})
it('should return error with undefined existing accounts', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let serialized = await primaryKeyring.serialize()
let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
try {
let result = await seedPhraseVerifier.verifyAccounts(undefined, seedWords)
assert.fail("Should reject")
} catch (err) {
assert.equal(err.message, 'No created accounts defined.')
}
})
it('should return error with empty accounts array', async function () {
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 1)
let serialized = await primaryKeyring.serialize()
let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
try {
let result = await seedPhraseVerifier.verifyAccounts([], seedWords)
assert.fail("Should reject")
} catch (err) {
assert.equal(err.message, 'No created accounts defined.')
}
})
it('should be able to verify more than one created account with seed words', async function () {
const keyState = await keyringController.addNewAccount(primaryKeyring)
const keyState2 = await keyringController.addNewAccount(primaryKeyring)
let createdAccounts = await primaryKeyring.getAccounts()
assert.equal(createdAccounts.length, 3)
let serialized = await primaryKeyring.serialize()
let seedWords = serialized.mnemonic
assert.notEqual(seedWords.length, 0)
let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
})
})
})

4
test/unit/tx-state-manager-test.js
View File

@ -5,7 +5,7 @@ const TxStateManager = require('../../app/scripts/lib/tx-state-manager')
const txStateHistoryHelper = require('../../app/scripts/lib/tx-state-history-helper')
const noop = () => true
describe('TransactionStateManger', function () {
describe('TransactionStateManager', function () {
let txStateManager
const currentNetworkId = 42
const otherNetworkId = 2
@ -281,4 +281,4 @@ describe('TransactionStateManger', function () {
})
})
})
})

202
ui/app/accounts/import/json.js
View File

@ -1,5 +1,5 @@
const inherits = require('util').inherits
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../../actions')
@ -7,100 +7,124 @@ const FileInput = require('react-simple-file-input').default
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
module.exports = connect(mapStateToProps)(JsonImportSubview)
class JsonImportSubview extends Component {
constructor (props) {
super(props)
function mapStateToProps (state) {
this.state = {
file: null,
fileContents: '',
}
}
render () {
const { error } = this.props
return (
h('div.new-account-import-form__json', [
h('p', 'Used by a variety of different clients'),
h('a.warning', {
href: HELP_LINK,
target: '_blank',
}, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 34%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
},
}),
h('input.new-account-import-form__input-password', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
}),
h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', {
onClick: () => this.props.goHome(),
}, [
'CANCEL',
]),
h('button.new-account-create-form__button-create', {
onClick: () => this.createNewKeychain(),
}, [
'IMPORT',
]),
]),
error ? h('span.error', error) : null,
])
)
}
onLoad (event, file) {
this.setState({file: file, fileContents: event.target.result})
}
createKeyringOnEnter (event) {
if (event.key === 'Enter') {
event.preventDefault()
this.createNewKeychain()
}
}
createNewKeychain () {
const state = this.state
if (!state) {
const message = 'You must select a valid file to import.'
return this.props.displayWarning(message)
}
const { fileContents } = state
if (!fileContents) {
const message = 'You must select a file to import.'
return this.props.displayWarning(message)
}
const passwordInput = document.getElementById('json-password-box')
const password = passwordInput.value
if (!password) {
const message = 'You must enter a password for the selected file.'
return this.props.displayWarning(message)
}
this.props.importNewJsonAccount([ fileContents, password ])
}
}
JsonImportSubview.propTypes = {
error: PropTypes.string,
goHome: PropTypes.func,
displayWarning: PropTypes.func,
importNewJsonAccount: PropTypes.func,
}
const mapStateToProps = state => {
return {
error: state.appState.warning,
}
}
inherits(JsonImportSubview, Component)
function JsonImportSubview () {
Component.call(this)
}
JsonImportSubview.prototype.render = function () {
const { error } = this.props
return (
h('div.new-account-import-form__json', [
h('p', 'Used by a variety of different clients'),
h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
h(FileInput, {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
margin: '20px 0px 12px 34%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
},
}),
h('input.new-account-import-form__input-password', {
type: 'password',
placeholder: 'Enter password',
id: 'json-password-box',
onKeyPress: this.createKeyringOnEnter.bind(this),
}),
h('div.new-account-create-form__buttons', {}, [
h('button.new-account-create-form__button-cancel', {
onClick: () => this.props.goHome(),
}, [
'CANCEL',
]),
h('button.new-account-create-form__button-create', {
onClick: () => this.createNewKeychain.bind(this),
}, [
'IMPORT',
]),
]),
error ? h('span.error', error) : null,
])
)
}
JsonImportSubview.prototype.onLoad = function (event, file) {
this.setState({file: file, fileContents: event.target.result})
}
JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
if (event.key === 'Enter') {
event.preventDefault()
this.createNewKeychain()
const mapDispatchToProps = dispatch => {
return {
goHome: () => dispatch(actions.goHome()),
displayWarning: warning => dispatch(actions.displayWarning(warning)),
importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
}
}
JsonImportSubview.prototype.createNewKeychain = function () {
const state = this.state
if (!state) {
const message = 'You must select a valid file to import.'
return this.props.dispatch(actions.displayWarning(message))
}
const { fileContents } = state
if (!fileContents) {
const message = 'You must select a file to import.'
return this.props.dispatch(actions.displayWarning(message))
}
const passwordInput = document.getElementById('json-password-box')
const password = passwordInput.value
if (!password) {
const message = 'You must enter a password for the selected file.'
return this.props.dispatch(actions.displayWarning(message))
}
this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)

129
ui/app/actions.js
View File

@ -286,20 +286,43 @@ function goHome () {
// async actions
function tryUnlockMetamask (password) {
return (dispatch) => {
return dispatch => {
dispatch(actions.showLoadingIndication())
dispatch(actions.unlockInProgress())
log.debug(`background.submitPassword`)
background.submitPassword(password, (err) => {
dispatch(actions.hideLoadingIndication())
if (err) {
dispatch(actions.unlockFailed(err.message))
} else {
dispatch(actions.unlockSucceeded())
dispatch(actions.transitionForward())
forceUpdateMetamaskState(dispatch)
}
return new Promise((resolve, reject) => {
background.submitPassword(password, error => {
if (error) {
return reject(error)
}
resolve()
})
})
.then(() => {
dispatch(actions.unlockSucceeded())
return forceUpdateMetamaskState(dispatch)
})
.then(() => {
return new Promise((resolve, reject) => {
background.verifySeedPhrase(err => {
if (err) {
dispatch(actions.displayWarning(err.message))
}
resolve()
})
})
})
.then(() => {
dispatch(actions.transitionForward())
dispatch(actions.hideLoadingIndication())
})
.catch(err => {
dispatch(actions.unlockFailed(err.message))
dispatch(actions.hideLoadingIndication())
})
}
}
@ -341,46 +364,53 @@ function createNewVaultAndRestore (password, seed) {
log.debug(`background.createNewVaultAndRestore`)
return new Promise((resolve, reject) => {
background.createNewVaultAndRestore(password, seed, (err) => {
dispatch(actions.hideLoadingIndication())
background.createNewVaultAndRestore(password, seed, err => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
dispatch(actions.showAccountsPage())
resolve()
})
})
.then(() => dispatch(actions.unMarkPasswordForgotten()))
.then(() => {
dispatch(actions.showAccountsPage())
dispatch(actions.hideLoadingIndication())
})
.catch(err => {
dispatch(actions.displayWarning(err.message))
dispatch(actions.hideLoadingIndication())
})
}
}
function createNewVaultAndKeychain (password) {
return (dispatch) => {
return dispatch => {
dispatch(actions.showLoadingIndication())
log.debug(`background.createNewVaultAndKeychain`)
return new Promise((resolve, reject) => {
background.createNewVaultAndKeychain(password, (err) => {
background.createNewVaultAndKeychain(password, err => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
log.debug(`background.placeSeedWords`)
background.placeSeedWords((err) => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
dispatch(actions.hideLoadingIndication())
forceUpdateMetamaskState(dispatch)
resolve()
})
})
})
.then(() => forceUpdateMetamaskState(dispatch))
.then(() => dispatch(actions.hideLoadingIndication()))
.catch(() => dispatch(actions.hideLoadingIndication()))
}
}
@ -391,18 +421,27 @@ function revealSeedConfirmation () {
}
function requestRevealSeed (password) {
return (dispatch) => {
return dispatch => {
dispatch(actions.showLoadingIndication())
log.debug(`background.submitPassword`)
background.submitPassword(password, (err) => {
if (err) {
return dispatch(actions.displayWarning(err.message))
}
log.debug(`background.placeSeedWords`)
background.placeSeedWords((err, result) => {
if (err) return dispatch(actions.displayWarning(err.message))
dispatch(actions.hideLoadingIndication())
dispatch(actions.showNewVaultSeed(result))
return new Promise((resolve, reject) => {
background.submitPassword(password, err => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
log.debug(`background.placeSeedWords`)
background.placeSeedWords((err, result) => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
dispatch(actions.showNewVaultSeed(result))
dispatch(actions.hideLoadingIndication())
resolve()
})
})
})
}
@ -751,7 +790,7 @@ function updateTransaction (txData) {
function updateAndApproveTx (txData) {
log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
return (dispatch) => {
log.debug(`actions calling background.updateAndApproveTx`)
log.debug(`actions calling background.updateAndApproveTx.`)
background.updateAndApproveTransaction(txData, (err) => {
dispatch(actions.hideLoadingIndication())
dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@ -853,11 +892,14 @@ function markPasswordForgotten () {
}
function unMarkPasswordForgotten () {
return (dispatch) => {
return background.unMarkPasswordForgotten(() => {
dispatch(actions.forgotPassword(false))
forceUpdateMetamaskState(dispatch)
return dispatch => {
return new Promise(resolve => {
background.unMarkPasswordForgotten(() => {
dispatch(actions.forgotPassword(false))
resolve()
})
})
.then(() => forceUpdateMetamaskState(dispatch))
}
}
@ -1712,11 +1754,16 @@ function callBackgroundThenUpdate (method, ...args) {
function forceUpdateMetamaskState (dispatch) {
log.debug(`background.getState`)
background.getState((err, newState) => {
if (err) {
return dispatch(actions.displayWarning(err.message))
}
dispatch(actions.updateMetamaskState(newState))
return new Promise((resolve, reject) => {
background.getState((err, newState) => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
dispatch(actions.updateMetamaskState(newState))
resolve()
})
})
}

16
ui/app/add-token.js
View File

@ -71,13 +71,17 @@ AddTokenScreen.prototype.componentWillMount = function () {
}
AddTokenScreen.prototype.toggleToken = function (address, token) {
const { selectedTokens, errors } = this.state
const { [address]: selectedToken } = selectedTokens
const { selectedTokens = {}, errors } = this.state
const selectedTokensCopy = { ...selectedTokens }
if (address in selectedTokensCopy) {
delete selectedTokensCopy[address]
} else {
selectedTokensCopy[address] = token
}
this.setState({
selectedTokens: {
...selectedTokens,
[address]: selectedToken ? null : token,
},
selectedTokens: selectedTokensCopy,
errors: {
...errors,
tokenSelector: null,

8
ui/app/components/dropdowns/network-dropdown.js
View File

@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
backgroundColor: '#29B6AF', // $java
isSelected: providerType === 'mainnet',
}),
h('span.network-name-item', {
@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
backgroundColor: '#ff4a8d', // $wild-strawberry
isSelected: providerType === 'ropsten',
}),
h('span.network-name-item', {
@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
backgroundColor: '#7057ff', // $cornflower-blue
isSelected: providerType === 'kovan',
}),
h('span.network-name-item', {
@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
backgroundColor: '#f6c343', // $saffron
isSelected: providerType === 'rinkeby',
}),
h('span.network-name-item', {

111
ui/app/components/modals/deposit-ether-modal.js
View File

@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
directly into your MetaMask wallet. No Account Needed.`
const FAUCET_ROW_TITLE = 'Test Faucet'
const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
function mapStateToProps (state) {
return {
@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
]),
h('div.deposit-ether-modal__buy-row__logo', [logo]),
h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
h('div.deposit-ether-modal__buy-row__description', [
@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
const isTestNetwork = ['3', '4', '42'].find(n => n === network)
const networkName = networkNames[network]
return h('div.deposit-ether-modal', {}, [
return h('div.page-container.page-container--full-width', {}, [
h('div.deposit-ether-modal__header', [
h('div.page-container__header', [
h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
h('div.page-container__title', 'Deposit Ether'),
h('div.deposit-ether-modal__header__description', [
h('div.page-container__subtitle', [
'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
]),
h('div.deposit-ether-modal__header__close', {
h('div.page-container__header-close', {
onClick: () => {
this.setState({ buyingWithShapeshift: false })
this.props.hideWarning()
@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () {
]),
h('div.deposit-ether-modal__buy-rows', [
h('.page-container__content', {}, [
this.renderRow({
logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
title: DIRECT_DEPOSIT_ROW_TITLE,
text: DIRECT_DEPOSIT_ROW_TEXT,
buttonLabel: 'View Account',
onButtonClick: () => this.goToAccountDetailsModal(),
hide: buyingWithShapeshift,
}),
h('div.deposit-ether-modal__buy-rows', [
this.renderRow({
logo: h('i.fa.fa-tint.fa-2x'),
title: FAUCET_ROW_TITLE,
text: facuetRowText(networkName),
buttonLabel: 'Get Ether',
onButtonClick: () => toFaucet(network),
hide: !isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({
logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
src: '../../../images/coinbase logo.png',
this.renderRow({
logo: h('div.deposit-ether-modal__logo', {
style: {
backgroundImage: 'url(\'../../../images/eth_logo.svg\')',
},
}),
title: DIRECT_DEPOSIT_ROW_TITLE,
text: DIRECT_DEPOSIT_ROW_TEXT,
buttonLabel: 'View Account Details',
onButtonClick: () => this.goToAccountDetailsModal(),
hide: buyingWithShapeshift,
}),
title: COINBASE_ROW_TITLE,
text: COINBASE_ROW_TEXT,
buttonLabel: 'Continue to Coinbase',
onButtonClick: () => toCoinbase(address),
hide: isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({
logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
src: '../../../images/shapeshift logo.png',
this.renderRow({
logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'),
title: FAUCET_ROW_TITLE,
text: faucetRowText(networkName),
buttonLabel: 'Continue to Test Faucet',
onButtonClick: () => toFaucet(network),
hide: !isTestNetwork || buyingWithShapeshift,
}),
title: SHAPESHIFT_ROW_TITLE,
text: SHAPESHIFT_ROW_TEXT,
buttonLabel: 'Buy with Shapeshift',
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
hide: isTestNetwork,
hideButton: buyingWithShapeshift,
hideTitle: buyingWithShapeshift,
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
showBackButton: this.state.buyingWithShapeshift,
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
}),
buyingWithShapeshift && h(ShapeshiftForm),
this.renderRow({
logo: h('div.deposit-ether-modal__logo', {
style: {
backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
height: '40px',
},
}),
title: COINBASE_ROW_TITLE,
text: COINBASE_ROW_TEXT,
buttonLabel: 'Continue to Coinbase',
onButtonClick: () => toCoinbase(address),
hide: isTestNetwork || buyingWithShapeshift,
}),
this.renderRow({
logo: h('div.deposit-ether-modal__logo', {
style: {
backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
},
}),
title: SHAPESHIFT_ROW_TITLE,
text: SHAPESHIFT_ROW_TEXT,
buttonLabel: 'Continue to Shapeshift',
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
hide: isTestNetwork,
hideButton: buyingWithShapeshift,
hideTitle: buyingWithShapeshift,
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
showBackButton: this.state.buyingWithShapeshift,
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
}),
buyingWithShapeshift && h(ShapeshiftForm),
]),
]),
])

10
ui/app/components/modals/modal.js
View File

@ -92,18 +92,20 @@ const MODALS = {
display: 'flex',
},
laptopModalStyle: {
width: '900px',
maxWidth: '900px',
width: '850px',
top: 'calc(10% + 10px)',
left: '0',
right: '0',
margin: '0 auto',
boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
borderRadius: '8px',
borderRadius: '7px',
transform: 'none',
height: 'calc(80% - 20px)',
overflowY: 'hidden',
},
contentStyle: {
borderRadius: '8px',
borderRadius: '7px',
height: '100%',
},
},

4
ui/app/components/pending-tx/confirm-send-token.js
View File

@ -63,8 +63,8 @@ function mapDispatchToProps (dispatch, ownProps) {
updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
editTransaction: txMeta => {
const { token: { address } } = ownProps
const { txParams, id } = txMeta
const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
const { txParams = {}, id } = txMeta
const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {}
const { params = [] } = tokenData
const { value: to } = params[0] || {}
const { value: tokenAmountInDec } = params[1] || {}

10
ui/app/components/tx-view.js
View File

@ -100,9 +100,10 @@ TxView.prototype.render = function () {
h('div.flex-row.phone-visible', {
style: {
margin: '1.5em 1.2em 0',
justifyContent: 'space-between',
alignItems: 'center',
flex: '0 0 auto',
margin: '10px',
},
}, [
@ -110,11 +111,10 @@ TxView.prototype.render = function () {
style: {
fontSize: '1.3em',
cursor: 'pointer',
padding: '10px',
},
onClick: () => {
this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
},
}, []),
onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
}),
h('.identicon-wrapper.select-none', {
style: {

3
ui/app/css/itcss/components/hero-balance.scss
View File

@ -5,9 +5,6 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: .3em .9em 0;
// height: 80vh;
// max-height: 225px;
flex: 0 0 auto;
}

50
ui/app/css/itcss/components/modal.scss
View File

@ -641,32 +641,40 @@
&__buy-rows {
width: 100%;
padding: 33px;
padding-top: 0px;
padding: 0 30px;
display: flex;
flex-flow: column nowrap;
flex: 1;
overflow-y: auto;
@media screen and (max-width: 575px) {
height: 0;
}
}
&__logo {
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__buy-row {
border-bottom: 1px solid $alto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
padding-bottom: 25px;
padding-top: 25px;
flex: 1 0 auto;
padding: 30px 0 20px;
min-height: 170px;
@media screen and (max-width: 575px) {
min-height: 360px;
min-height: 270px;
flex-flow: column;
justify-content: center;
padding-top: 45px;
justify-content: flex-start;
}
&__back {
@ -692,30 +700,35 @@
}
}
&__logo {
&__logo-container {
display: flex;
justify-content: center;
flex: 0.3 1 auto;
flex: 0 0 auto;
padding: 0 20px;
@media screen and (min-width: 575px) {
min-width: 215px;
@media screen and (min-width: 576px) {
width: 12rem;
}
@media screen and (max-width: 575px) {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
}
}
&__coinbase-logo {
height: 40px;
width: 180px;
}
&__shapeshift-logo {
height: 60px;
width: 174px;
}
&__eth-logo {
border-radius: 50%;
width: 68px;
height: 68px;
width: 68px;
border: 3px solid $tundora;
z-index: 25;
padding: 4px;
@ -728,10 +741,11 @@
&__description {
color: $cape-cod;
flex: 0.5 1 auto;
padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: 575px) {
min-width: 315px;
width: 15rem;
}
&__title {

5
ui/app/css/itcss/components/new-account.scss
View File

@ -161,15 +161,14 @@
display: flex;
flex-flow: column;
align-items: center;
padding: 30px 30px 0;
&__input-label {
color: $scorpion;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
margin-top: 29px;
align-self: flex-start;
margin-left: 30px;
}
&__input {
@ -190,7 +189,7 @@
margin-top: 39px;
display: flex;
width: 100%;
justify-content: space-evenly;
justify-content: space-between;
}
&__button-cancel,

43
ui/app/css/itcss/components/newui-sections.scss
View File

@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
cursor: pointer;
display: flex;
justify-content: center;
padding: 10px;
}
// wallet view and sidebar
@ -290,3 +291,45 @@ $wallet-view-bg: $alabaster;
.token-balance__amount {
padding-right: 6px;
}
// first time
.first-view-main {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
@media screen and (max-width: 575px) {
height: 100%;
}
@media screen and (min-width: 576px) {
width: 85vw;
}
@media screen and (min-width: 769px) {
width: 80vw;
}
@media screen and (min-width: 1281px) {
width: 62vw;
}
}
.unlock-screen-container {
z-index: $main-container-z-index;
font-family: Roboto;
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
background: #f7f7f7;
width: 100%;
}
.unlock-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 auto;
}

33
ui/app/css/itcss/generic/index.scss
View File

@ -77,25 +77,30 @@ input.large-input {
z-index: 25;
display: flex;
flex-flow: column;
border-radius: 7px;
height: 100%;
&__header {
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
padding: 1.15rem 0.95rem;
padding: 20px;
flex: 0 0 auto;
background: $alabaster;
position: relative;
}
&__header-close::after {
content: '\00D7';
font-size: 40px;
&__header-close {
color: $tundora;
position: absolute;
top: 21.5px;
right: 28.5px;
top: 20px;
right: 20px;
cursor: pointer;
overflow: hidden;
&::after {
content: '\00D7';
font-size: 40px;
}
}
&__footer {
@ -114,7 +119,7 @@ input.large-input {
&__footer-button {
width: 165px;
height: 60px;
height: 55px;
font-size: 1rem;
text-transform: uppercase;
margin-right: 1rem;
@ -130,7 +135,7 @@ input.large-input {
font-family: Roboto;
font-size: 2rem;
font-weight: 500;
line-height: initial;
line-height: 2rem;
}
&__subtitle {
@ -174,6 +179,15 @@ input.large-input {
}
}
}
&--full-width {
width: initial;
}
&__content {
height: 100%;
overflow-y: auto;
}
}
@media screen and (max-width: 250px) {
@ -200,5 +214,6 @@ input.large-input {
width: 100%;
overflow-y: auto;
background-color: $white;
border-radius: 0;
}
}

4
ui/app/css/itcss/settings/variables.scss
View File

@ -46,6 +46,10 @@ $manatee: #93949d;
$spindle: #c7ddec;
$mid-gray: #5b5d67;
$cape-cod: #38393a;
$java: #29b6af;
$wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff;
$saffron: #f6c343;
/*
Z-Indicies

23
ui/app/keychains/hd/restore-vault.js
View File

@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () {
}
RestoreVaultScreen.prototype.showInitializeMenu = function () {
this.props.dispatch(actions.unMarkPasswordForgotten())
if (this.props.forgottenPassword) {
this.props.dispatch(actions.backToUnlockView())
} else {
this.props.dispatch(actions.showInitializeMenu())
}
const { dispatch, forgottenPassword } = this.props
dispatch(actions.unMarkPasswordForgotten())
.then(() => {
if (forgottenPassword) {
dispatch(actions.backToUnlockView())
} else {
dispatch(actions.showInitializeMenu())
}
})
}
RestoreVaultScreen.prototype.createOnEnter = function (event) {
@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
this.warning = null
this.props.dispatch(actions.displayWarning(this.warning))
this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
.then(() => {
this.props.dispatch(actions.unMarkPasswordForgotten())
})
.catch((err) => {
log.error(err.message)
})
.catch(err => log.error(err.message))
}

14
ui/app/main-container.js
View File

@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
return h(Settings, {key: 'config'})
default:
log.debug('rendering locked screen')
contents = {
component: UnlockScreen,
style: {
boxShadow: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#F7F7F7',
// must force 100%, because lock screen is full-width
width: '100%',
},
key: 'locked',
}
return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
}
}

14
ui/app/reducers/app.js
View File

@ -138,14 +138,18 @@ function reduceApp (state, action) {
})
case actions.FORGOT_PASSWORD:
return extend(appState, {
currentView: {
name: action.value ? 'restoreVault' : 'accountDetail',
},
transForward: false,
const newState = extend(appState, {
forgottenPassword: action.value,
})
if (action.value) {
newState.currentView = {
name: 'restoreVault',
}
}
return newState
case actions.SHOW_INIT_MENU:
return extend(appState, {
currentView: defaultView,

2
ui/app/reducers/metamask.js
View File

@ -131,8 +131,6 @@ function reduceMetamask (state, action) {
case actions.SHOW_NEW_VAULT_SEED:
return extend(metamaskState, {
isUnlocked: true,
isInitialized: false,
isRevealingSeedWords: true,
seedWords: action.value,
})

129
ui/app/unlock.js
View File

@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
const state = this.props
const warning = state.warning
return (
h('.flex-column', {
style: {
width: 'inherit',
},
}, [
h('.unlock-screen.flex-column.flex-center.flex-grow', [
h('.unlock-screen', [
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
}),
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
}),
h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
},
}, 'MetaMask'),
h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
},
}, 'MetaMask'),
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'enter password',
style: {
background: 'white',
},
onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this),
}),
h('input.large-input', {
type: 'password',
id: 'password-box',
placeholder: 'enter password',
style: {
background: 'white',
},
onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this),
}),
h('.error', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
},
}, warning),
h('.error', {
style: {
display: warning ? 'block' : 'none',
padding: '0 20px',
textAlign: 'center',
},
}, warning),
h('button.primary.cursor-pointer', {
onClick: this.onSubmit.bind(this),
style: {
margin: 10,
},
}, 'Log In'),
]),
h('button.primary.cursor-pointer', {
onClick: this.onSubmit.bind(this),
style: {
margin: 10,
},
}, 'Log In'),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.markPasswordForgotten())
if (environmentType() === 'popup') {
global.platform.openExtensionInBrowser()
}
},
style: {
fontSize: '0.8em',
color: 'rgb(247, 134, 28)',
textDecoration: 'underline',
},
}, 'Restore from seed phrase'),
]),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
]),
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.markPasswordForgotten())
if (environmentType() === 'popup') {
global.platform.openExtensionInBrowser()
}
},
style: {
fontSize: '0.8em',
color: 'rgb(247, 134, 28)',
textDecoration: 'underline',
},
}, 'Restore from seed phrase'),
h('p.pointer', {
onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, 'Use classic interface'),
])
)
}

809
yarn.lock
View File

File diff suppressed because it is too large Load Diff