mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 12:29:06 +01:00
Merge branch 'master' into i3033-responsive-newui-onboarding
This commit is contained in:
kumavis
GitHub
commit
572234e383
202
.circleci/config.yml
Normal file
202
.circleci/config.yml
Normal 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
3
.gitignore
vendored
@ -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
3
.nsprc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"exceptions": ["https://nodesecurity.io/advisories/566"]
|
||||
}
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
48
app/scripts/lib/seed-phrase-verifier.js
Normal 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
|
||||
@ -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()
|
||||
|
||||
|
||||
@ -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
17
circle.yml
@ -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
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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')
|
||||
|
||||
//
|
||||
@ -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')
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
22241
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -23,4 +23,4 @@ pump(
|
||||
console.log(`Integration test build completed: "${bundlePath}"`)
|
||||
process.exit(0)
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
53
test/lib/util.js
Normal 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
|
||||
}
|
||||
@ -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 () {
|
||||
|
||||
@ -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
133
test/unit/seed-phrase-verifier-test.js
Normal 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)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -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 () {
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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', {
|
||||
|
||||
@ -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),
|
||||
|
||||
]),
|
||||
|
||||
]),
|
||||
])
|
||||
|
||||
@ -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%',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -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] || {}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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))
|
||||
}
|
||||
|
||||
@ -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' }))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
129
ui/app/unlock.js
@ -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'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user