@@ -23,55 +24,26 @@ class PendingTransactionTracker extends EventEmitter { super() this.query = new EthQuery(config.provider) this.nonceTracker = config.nonceTracker - // default is one day this.getPendingTransactions = config.getPendingTransactions this.getCompletedTransactions = config.getCompletedTransactions this.publishTransaction = config.publishTransaction - this._checkPendingTxs() + this.confirmTransaction = config.confirmTransaction } /** - checks if a signed tx is in a block and - if it is included emits tx status as 'confirmed' - @param block {object}, a full block - @emits tx:confirmed - @emits tx:failed + checks the network for signed txs and releases the nonce global lock if it is */ - checkForTxInBlock (block) { - const signedTxList = this.getPendingTransactions() - if (!signedTxList.length) return - signedTxList.forEach((txMeta) => { - const txHash = txMeta.hash - const txId = txMeta.id - - if (!txHash) { - const noTxHashErr = new Error('We had an error while submitting this transaction, please try again.') - noTxHashErr.name = 'NoTxHashError' - this.emit('tx:failed', txId, noTxHashErr) - return - } - - - block.transactions.forEach((tx) => { - if (tx.hash === txHash) this.emit('tx:confirmed', txId) - }) - }) - } - - /** - asks the network for the transaction to see if a block number is included on it - if we have skipped/missed blocks - @param object - oldBlock newBlock - */ - queryPendingTxs ({ oldBlock, newBlock }) { - // check pending transactions on start - if (!oldBlock) { - this._checkPendingTxs() - return + async updatePendingTxs () { + // in order to keep the nonceTracker accurate we block it while updating pending transactions + const nonceGlobalLock = await this.nonceTracker.getGlobalLock() + try { + const pendingTxs = this.getPendingTransactions() + await Promise.all(pendingTxs.map((txMeta) => this._checkPendingTx(txMeta))) + } catch (err) { + log.error('PendingTransactionTracker - Error updating pending transactions') + log.error(err) } - // if we synced by more than one block, check for missed pending transactions - const diff = Number.parseInt(newBlock.number, 16) - Number.parseInt(oldBlock.number, 16) - if (diff > 1) this._checkPendingTxs() + nonceGlobalLock.releaseLock() } /** @@ -79,11 +51,11 @@ class PendingTransactionTracker extends EventEmitter { @param block {object} - a block object @emits tx:warning */ - resubmitPendingTxs (block) { + resubmitPendingTxs (blockNumber) { const pending = this.getPendingTransactions() // only try resubmitting if their are transactions to resubmit if (!pending.length) return - pending.forEach((txMeta) => this._resubmitTx(txMeta, block.number).catch((err) => { + pending.forEach((txMeta) => this._resubmitTx(txMeta, blockNumber).catch((err) => { /* Dont marked as failed if the error is a "known" transaction warning "there is already a transaction with the same sender-nonce @@ -145,6 +117,7 @@ class PendingTransactionTracker extends EventEmitter { this.emit('tx:retry', txMeta) return txHash } + /** Ask the network for the transaction to see if it has been include in a block @param txMeta {Object} - the txMeta object @@ -174,9 +147,8 @@ class PendingTransactionTracker extends EventEmitter { } // get latest transaction status - let txParams try { - txParams = await this.query.getTransactionByHash(txHash) + const txParams = await this.query.getTransactionByHash(txHash) if (!txParams) return if (txParams.blockNumber) { this.emit('tx:confirmed', txId) @@ -190,27 +162,13 @@ class PendingTransactionTracker extends EventEmitter { } } - /** - checks the network for signed txs and releases the nonce global lock if it is - */ - async _checkPendingTxs () { - const signedTxList = this.getPendingTransactions() - // in order to keep the nonceTracker accurate we block it while updating pending transactions - const { releaseLock } = await this.nonceTracker.getGlobalLock() - try { - await Promise.all(signedTxList.map((txMeta) => this._checkPendingTx(txMeta))) - } catch (err) { - log.error('PendingTransactionWatcher - Error updating pending transactions') - log.error(err) - } - releaseLock() - } - /** checks to see if a confirmed txMeta has the same nonce @param txMeta {Object} - txMeta object @returns {boolean} */ + + async _checkIfNonceIsTaken (txMeta) { const address = txMeta.txParams.from const completed = this.getCompletedTransactions(address) diff --git a/app/scripts/controllers/transactions/tx-gas-utils.js b/app/scripts/controllers/transactions/tx-gas-utils.js index 5cd0f5407..3dd45507f 100644 --- a/app/scripts/controllers/transactions/tx-gas-utils.js +++ b/app/scripts/controllers/transactions/tx-gas-utils.js @@ -25,7 +25,7 @@ class TxGasUtil { @returns {object} the txMeta object with the gas written to the txParams */ async analyzeGasUsage (txMeta) { - const block = await this.query.getBlockByNumber('latest', true) + const block = await this.query.getBlockByNumber('latest', false) let estimatedGasHex try { estimatedGasHex = await this.estimateTxGas(txMeta, block.gasLimit) diff --git a/app/scripts/controllers/transactions/tx-state-manager.js b/app/scripts/controllers/transactions/tx-state-manager.js index 28a18ca2e..daa6cc388 100644 --- a/app/scripts/controllers/transactions/tx-state-manager.js +++ b/app/scripts/controllers/transactions/tx-state-manager.js @@ -353,6 +353,7 @@ class TransactionStateManager extends EventEmitter { const txMeta = this.getTx(txId) txMeta.err = { message: err.toString(), + rpc: err.value, stack: err.stack, } this.updateTx(txMeta) diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js index 50c7b1ea1..a895b7834 100644 --- a/app/scripts/inpage.js +++ b/app/scripts/inpage.js @@ -4,7 +4,7 @@ require('web3/dist/web3.min.js') const log = require('loglevel') const LocalMessageDuplexStream = require('post-message-stream') const setupDappAutoReload = require('./lib/auto-reload.js') -const MetamaskInpageProvider = require('./lib/inpage-provider.js') +const MetamaskInpageProvider = require('metamask-inpage-provider') restoreContextAfterImports() log.setDefaultLevel(process.env.METAMASK_DEBUG ? 'debug' : 'warn') @@ -22,6 +22,25 @@ var metamaskStream = new LocalMessageDuplexStream({ // compose the inpage provider var inpageProvider = new MetamaskInpageProvider(metamaskStream) +// Augment the provider with its enable method +inpageProvider.enable = function (options = {}) { + return new Promise((resolve, reject) => { + if (options.mockRejection) { + reject('User rejected account access') + } else { + inpageProvider.sendAsync({ method: 'eth_accounts', params: [] }, (error, response) => { + if (error) { + reject(error) + } else { + resolve(response.result) + } + }) + } + }) +} + +window.ethereum = inpageProvider + // // setup web3 // diff --git a/app/scripts/lib/account-tracker.js b/app/scripts/lib/account-tracker.js index 0f7b3d865..2e9340018 100644 --- a/app/scripts/lib/account-tracker.js +++ b/app/scripts/lib/account-tracker.js @@ -7,14 +7,13 @@ * on each new block. */ -const async = require('async') const EthQuery = require('eth-query') const ObservableStore = require('obs-store') -const EventEmitter = require('events').EventEmitter -function noop () {} +const log = require('loglevel') +const pify = require('pify') -class AccountTracker extends EventEmitter { +class AccountTracker { /** * This module is responsible for tracking any number of accounts and caching their current balances & transaction @@ -35,8 +34,6 @@ class AccountTracker extends EventEmitter { * */ constructor (opts = {}) { - super() - const initState = { accounts: {}, currentBlockGasLimit: '', @@ -44,12 +41,29 @@ class AccountTracker extends EventEmitter { this.store = new ObservableStore(initState) this._provider = opts.provider - this._query = new EthQuery(this._provider) + this._query = pify(new EthQuery(this._provider)) this._blockTracker = opts.blockTracker - // subscribe to latest block - this._blockTracker.on('block', this._updateForBlock.bind(this)) // blockTracker.currentBlock may be null - this._currentBlockNumber = this._blockTracker.currentBlock + this._currentBlockNumber = this._blockTracker.getCurrentBlock() + this._blockTracker.once('latest', blockNumber => { + this._currentBlockNumber = blockNumber + }) + // bind function for easier listener syntax + this._updateForBlock = this._updateForBlock.bind(this) + } + + start () { + // remove first to avoid double add + this._blockTracker.removeListener('latest', this._updateForBlock) + // add listener + this._blockTracker.addListener('latest', this._updateForBlock) + // fetch account balances + this._updateAccounts() + } + + stop () { + // remove listener + this._blockTracker.removeListener('latest', this._updateForBlock) } /** @@ -67,49 +81,57 @@ class AccountTracker extends EventEmitter { const accounts = this.store.getState().accounts const locals = Object.keys(accounts) - const toAdd = [] + const accountsToAdd = [] addresses.forEach((upstream) => { if (!locals.includes(upstream)) { - toAdd.push(upstream) + accountsToAdd.push(upstream) } }) - const toRemove = [] + const accountsToRemove = [] locals.forEach((local) => { if (!addresses.includes(local)) { - toRemove.push(local) + accountsToRemove.push(local) } }) - toAdd.forEach(upstream => this.addAccount(upstream)) - toRemove.forEach(local => this.removeAccount(local)) - this._updateAccounts() + this.addAccounts(accountsToAdd) + this.removeAccount(accountsToRemove) } /** - * Adds a new address to this AccountTracker's accounts object, which points to an empty object. This object will be + * Adds new addresses to track the balances of * given a balance as long this._currentBlockNumber is defined. * - * @param {string} address A hex address of a new account to store in this AccountTracker's accounts object + * @param {array} addresses An array of hex addresses of new accounts to track * */ - addAccount (address) { + addAccounts (addresses) { const accounts = this.store.getState().accounts - accounts[address] = {} + // add initial state for addresses + addresses.forEach(address => { + accounts[address] = {} + }) + // save accounts state this.store.updateState({ accounts }) + // fetch balances for the accounts if there is block number ready if (!this._currentBlockNumber) return - this._updateAccount(address) + addresses.forEach(address => this._updateAccount(address)) } /** - * Removes an account from this AccountTracker's accounts object + * Removes accounts from being tracked * - * @param {string} address A hex address of a the account to remove + * @param {array} an array of hex addresses to stop tracking * */ - removeAccount (address) { + removeAccount (addresses) { const accounts = this.store.getState().accounts - delete accounts[address] + // remove each state object + addresses.forEach(address => { + delete accounts[address] + }) + // save accounts state this.store.updateState({ accounts }) } @@ -118,71 +140,56 @@ class AccountTracker extends EventEmitter { * via EthQuery * * @private - * @param {object} block Data about the block that contains the data to update to. + * @param {number} blockNumber the block number to update to. * @fires 'block' The updated state, if all account updates are successful * */ - _updateForBlock (block) { - this._currentBlockNumber = block.number - const currentBlockGasLimit = block.gasLimit + async _updateForBlock (blockNumber) { + this._currentBlockNumber = blockNumber + // block gasLimit polling shouldn't be in account-tracker shouldn't be here... + const currentBlock = await this._query.getBlockByNumber(blockNumber, false) + if (!currentBlock) return + const currentBlockGasLimit = currentBlock.gasLimit this.store.updateState({ currentBlockGasLimit }) - async.parallel([ - this._updateAccounts.bind(this), - ], (err) => { - if (err) return console.error(err) - this.emit('block', this.store.getState()) - }) + try { + await this._updateAccounts() + } catch (err) { + log.error(err) + } } /** * Calls this._updateAccount for each account in this.store * - * @param {Function} cb A callback to pass to this._updateAccount, called after each account is successfully updated + * @returns {Promise} after all account balances updated * */ - _updateAccounts (cb = noop) { + async _updateAccounts () { const accounts = this.store.getState().accounts const addresses = Object.keys(accounts) - async.each(addresses, this._updateAccount.bind(this), cb) + await Promise.all(addresses.map(this._updateAccount.bind(this))) } /** - * Updates the current balance of an account. Gets an updated balance via this._getAccount. + * Updates the current balance of an account. * * @private * @param {string} address A hex address of a the account to be updated - * @param {Function} cb A callback to call once the account at address is successfully update + * @returns {Promise} after the account balance is updated * */ - _updateAccount (address, cb = noop) { - this._getAccount(address, (err, result) => { - if (err) return cb(err) - result.address = address - const accounts = this.store.getState().accounts - // only populate if the entry is still present - if (accounts[address]) { - accounts[address] = result - this.store.updateState({ accounts }) - } - cb(null, result) - }) - } - - /** - * Gets the current balance of an account via EthQuery. - * - * @private - * @param {string} address A hex address of a the account to query - * @param {Function} cb A callback to call once the account at address is successfully update - * - */ - _getAccount (address, cb = noop) { - const query = this._query - async.parallel({ - balance: query.getBalance.bind(query, address), - }, cb) + async _updateAccount (address) { + // query balance + const balance = await this._query.getBalance(address) + const result = { address, balance } + // update accounts state + const { accounts } = this.store.getState() + // only populate if the entry is still present + if (!accounts[address]) return + accounts[address] = result + this.store.updateState({ accounts }) } } diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js deleted file mode 100644 index 12fa26813..000000000 --- a/app/scripts/lib/config-manager.js +++ /dev/null @@ -1,226 +0,0 @@ -const ethUtil = require('ethereumjs-util') -const normalize = require('eth-sig-util').normalize - -/* The config-manager is a convenience object - * wrapping a pojo-migrator. - * - * It exists mostly to allow the creation of - * convenience methods to access and persist - * particular portions of the state. - */ -module.exports = ConfigManager -function ConfigManager (opts) { - // ConfigManager is observable and will emit updates - this._subs = [] - this.store = opts.store -} - -ConfigManager.prototype.setConfig = function (config) { - var data = this.getData() - data.config = config - this.setData(data) - this._emitUpdates(config) -} - -ConfigManager.prototype.getConfig = function () { - var data = this.getData() - return data.config -} - -ConfigManager.prototype.setData = function (data) { - this.store.putState(data) -} - -ConfigManager.prototype.getData = function () { - return this.store.getState() -} - -ConfigManager.prototype.setPasswordForgotten = function (passwordForgottenState) { - const data = this.getData() - data.forgottenPassword = passwordForgottenState - this.setData(data) -} - -ConfigManager.prototype.getPasswordForgotten = function (passwordForgottenState) { - const data = this.getData() - return data.forgottenPassword -} - -ConfigManager.prototype.setWallet = function (wallet) { - var data = this.getData() - data.wallet = wallet - this.setData(data) -} - -ConfigManager.prototype.setVault = function (encryptedString) { - var data = this.getData() - data.vault = encryptedString - this.setData(data) -} - -ConfigManager.prototype.getVault = function () { - var data = this.getData() - return data.vault -} - -ConfigManager.prototype.getKeychains = function () { - return this.getData().keychains || [] -} - -ConfigManager.prototype.setKeychains = function (keychains) { - var data = this.getData() - data.keychains = keychains - this.setData(data) -} - -ConfigManager.prototype.getSelectedAccount = function () { - var config = this.getConfig() - return config.selectedAccount -} - -ConfigManager.prototype.setSelectedAccount = function (address) { - var config = this.getConfig() - config.selectedAccount = ethUtil.addHexPrefix(address) - this.setConfig(config) -} - -ConfigManager.prototype.getWallet = function () { - return this.getData().wallet -} - -// Takes a boolean -ConfigManager.prototype.setShowSeedWords = function (should) { - var data = this.getData() - data.showSeedWords = should - this.setData(data) -} - - -ConfigManager.prototype.getShouldShowSeedWords = function () { - var data = this.getData() - return data.showSeedWords -} - -ConfigManager.prototype.setSeedWords = function (words) { - var data = this.getData() - data.seedWords = words - this.setData(data) -} - -ConfigManager.prototype.getSeedWords = function () { - var data = this.getData() - return data.seedWords -} -ConfigManager.prototype.setRpcTarget = function (rpcUrl) { - var config = this.getConfig() - config.provider = { - type: 'rpc', - rpcTarget: rpcUrl, - } - this.setConfig(config) -} - -ConfigManager.prototype.setProviderType = function (type) { - var config = this.getConfig() - config.provider = { - type: type, - } - this.setConfig(config) -} - -ConfigManager.prototype.useEtherscanProvider = function () { - var config = this.getConfig() - config.provider = { - type: 'etherscan', - } - this.setConfig(config) -} - -ConfigManager.prototype.getProvider = function () { - var config = this.getConfig() - return config.provider -} - -// -// Tx -// - -ConfigManager.prototype.getTxList = function () { - var data = this.getData() - if (data.transactions !== undefined) { - return data.transactions - } else { - return [] - } -} - -ConfigManager.prototype.setTxList = function (txList) { - var data = this.getData() - data.transactions = txList - this.setData(data) -} - - -// wallet nickname methods - -ConfigManager.prototype.getWalletNicknames = function () { - var data = this.getData() - const nicknames = ('walletNicknames' in data) ? data.walletNicknames : {} - return nicknames -} - -ConfigManager.prototype.nicknameForWallet = function (account) { - const address = normalize(account) - const nicknames = this.getWalletNicknames() - return nicknames[address] -} - -ConfigManager.prototype.setNicknameForWallet = function (account, nickname) { - const address = normalize(account) - const nicknames = this.getWalletNicknames() - nicknames[address] = nickname - var data = this.getData() - data.walletNicknames = nicknames - this.setData(data) -} - -// observable - -ConfigManager.prototype.getSalt = function () { - var data = this.getData() - return data.salt -} - -ConfigManager.prototype.setSalt = function (salt) { - var data = this.getData() - data.salt = salt - this.setData(data) -} - -ConfigManager.prototype.subscribe = function (fn) { - this._subs.push(fn) - var unsubscribe = this.unsubscribe.bind(this, fn) - return unsubscribe -} - -ConfigManager.prototype.unsubscribe = function (fn) { - var index = this._subs.indexOf(fn) - if (index !== -1) this._subs.splice(index, 1) -} - -ConfigManager.prototype._emitUpdates = function (state) { - this._subs.forEach(function (handler) { - handler(state) - }) -} - -ConfigManager.prototype.setLostAccounts = function (lostAccounts) { - var data = this.getData() - data.lostAccounts = lostAccounts - this.setData(data) -} - -ConfigManager.prototype.getLostAccounts = function () { - var data = this.getData() - return data.lostAccounts || [] -} diff --git a/app/scripts/lib/createErrorMiddleware.js b/app/scripts/lib/createErrorMiddleware.js deleted file mode 100644 index 3bd7cf322..000000000 --- a/app/scripts/lib/createErrorMiddleware.js +++ /dev/null @@ -1,67 +0,0 @@ -const log = require('loglevel') - -/** - * JSON-RPC error object - * - * @typedef {Object} RpcError - * @property {number} code - Indicates the error type that occurred - * @property {Object} [data] - Contains additional information about the error - * @property {string} [message] - Short description of the error - */ - -/** - * Middleware configuration object - * - * @typedef {Object} MiddlewareConfig - * @property {boolean} [override] - Use RPC_ERRORS message in place of provider message - */ - -/** - * Map of standard and non-standard RPC error codes to messages - */ -const RPC_ERRORS = { - 1: 'An unauthorized action was attempted.', - 2: 'A disallowed action was attempted.', - 3: 'An execution error occurred.', - [-32600]: 'The JSON sent is not a valid Request object.', - [-32601]: 'The method does not exist / is not available.', - [-32602]: 'Invalid method parameter(s).', - [-32603]: 'Internal JSON-RPC error.', - [-32700]: 'Invalid JSON was received by the server. An error occurred on the server while parsing the JSON text.', - internal: 'Internal server error.', - unknown: 'Unknown JSON-RPC error.', -} - -/** - * Modifies a JSON-RPC error object in-place to add a human-readable message, - * optionally overriding any provider-supplied message - * - * @param {RpcError} error - JSON-RPC error object - * @param {boolean} override - Use RPC_ERRORS message in place of provider message - */ -function sanitizeRPCError (error, override) { - if (error.message && !override) { return error } - const message = error.code > -31099 && error.code < -32100 ? RPC_ERRORS.internal : RPC_ERRORS[error.code] - error.message = message || RPC_ERRORS.unknown -} - -/** - * json-rpc-engine middleware that both logs standard and non-standard error - * messages and ends middleware stack traversal if an error is encountered - * - * @param {MiddlewareConfig} [config={override:true}] - Middleware configuration - * @returns {Function} json-rpc-engine middleware function - */ -function createErrorMiddleware ({ override = true } = {}) { - return (req, res, next) => { - next(done => { - const { error } = res - if (!error) { return done() } - sanitizeRPCError(error) - log.error(`Nifty Wallet - RPC Error: ${error.message}`, error) - done() - }) - } -} - -module.exports = createErrorMiddleware diff --git a/app/scripts/lib/events-proxy.js b/app/scripts/lib/events-proxy.js deleted file mode 100644 index f83773ccc..000000000 --- a/app/scripts/lib/events-proxy.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Returns an EventEmitter that proxies events from the given event emitter - * @param {any} eventEmitter - * @param {object} listeners - The listeners to proxy to - * @returns {any} - */ -module.exports = function createEventEmitterProxy (eventEmitter, listeners) { - let target = eventEmitter - const eventHandlers = listeners || {} - const proxy = /** @type {any} */ (new Proxy({}, { - get: (_, name) => { - // intercept listeners - if (name === 'on') return addListener - if (name === 'setTarget') return setTarget - if (name === 'proxyEventHandlers') return eventHandlers - return (/** @type {any} */ (target))[name] - }, - set: (_, name, value) => { - target[name] = value - return true - }, - })) - function setTarget (/** @type {EventEmitter} */ eventEmitter) { - target = eventEmitter - // migrate listeners - Object.keys(eventHandlers).forEach((name) => { - /** @type {Array
+
+
)
diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js
index 59b6623d4..b581df38f 100644
--- a/old-ui/app/account-detail.js
+++ b/old-ui/app/account-detail.js
@@ -33,6 +33,7 @@ function mapStateToProps (state) {
currentCurrency: state.metamask.currentCurrency,
currentAccountTab: state.metamask.currentAccountTab,
tokens: state.metamask.tokens,
+ suggestedTokens: state.metamask.suggestedTokens,
computedBalances: state.metamask.computedBalances,
}
}
@@ -50,6 +51,10 @@ AccountDetailScreen.prototype.render = function () {
var account = props.accounts[selected]
const { network, conversionRate, currentCurrency } = props
+ if (Object.keys(props.suggestedTokens).length > 0) {
+ this.props.dispatch(actions.showAddSuggestedTokenPage())
+ }
+
return (
h('.account-detail-section.full-flex-height', [
diff --git a/old-ui/app/add-suggested-token.js b/old-ui/app/add-suggested-token.js
new file mode 100644
index 000000000..ea534b7da
--- /dev/null
+++ b/old-ui/app/add-suggested-token.js
@@ -0,0 +1,202 @@
+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 Tooltip = require('./components/tooltip.js')
+const ethUtil = require('ethereumjs-util')
+const Copyable = require('./components/copyable')
+const addressSummary = require('./util').addressSummary
+
+
+module.exports = connect(mapStateToProps)(AddSuggestedTokenScreen)
+
+function mapStateToProps (state) {
+ return {
+ identities: state.metamask.identities,
+ suggestedTokens: state.metamask.suggestedTokens,
+ }
+}
+
+inherits(AddSuggestedTokenScreen, Component)
+function AddSuggestedTokenScreen () {
+ this.state = {
+ warning: null,
+ }
+ Component.call(this)
+}
+
+AddSuggestedTokenScreen.prototype.render = function () {
+ const state = this.state
+ const props = this.props
+ const { warning } = state
+ const key = Object.keys(props.suggestedTokens)[0]
+ const { address, symbol, decimals } = props.suggestedTokens[key]
+
+ return (
+ h('.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('h2.page-subtitle', 'Add Suggested Token'),
+ ]),
+
+ h('.error', {
+ style: {
+ display: warning ? 'block' : 'none',
+ padding: '0 20px',
+ textAlign: 'center',
+ },
+ }, warning),
+
+ // conf view
+ h('.flex-column.flex-justify-center.flex-grow.select-none', [
+ h('.flex-space-around', {
+ style: {
+ padding: '20px',
+ },
+ }, [
+
+ h('div', [
+ h(Tooltip, {
+ position: 'top',
+ title: 'The contract of the actual token contract. Click for more info.',
+ }, [
+ h('a', {
+ style: { fontWeight: 'bold', paddingRight: '10px'},
+ href: 'https://support.metamask.io/kb/article/24-what-is-a-token-contract-address',
+ target: '_blank',
+ }, [
+ h('span', 'Token Contract Address '),
+ h('i.fa.fa-question-circle'),
+ ]),
+ ]),
+ ]),
+
+ h('div', {
+ style: { display: 'flex' },
+ }, [
+ h(Copyable, {
+ value: ethUtil.toChecksumAddress(address),
+ }, [
+ h('span#token-address', {
+ style: {
+ width: 'inherit',
+ flex: '1 0 auto',
+ height: '30px',
+ margin: '8px',
+ display: 'flex',
+ },
+ }, addressSummary(address, 24, 4, false)),
+ ]),
+ ]),
+
+ h('div', [
+ h('span', {
+ style: { fontWeight: 'bold', paddingRight: '10px'},
+ }, 'Token Symbol'),
+ ]),
+
+ h('div', { style: {display: 'flex'} }, [
+ h('p#token_symbol', {
+ style: {
+ width: 'inherit',
+ flex: '1 0 auto',
+ height: '30px',
+ margin: '8px',
+ },
+ }, symbol),
+ ]),
+
+ h('div', [
+ h('span', {
+ style: { fontWeight: 'bold', paddingRight: '10px'},
+ }, 'Decimals of Precision'),
+ ]),
+
+ h('div', { style: {display: 'flex'} }, [
+ h('p#token_decimals', {
+ type: 'number',
+ style: {
+ width: 'inherit',
+ flex: '1 0 auto',
+ height: '30px',
+ margin: '8px',
+ },
+ }, decimals),
+ ]),
+
+ h('button', {
+ style: {
+ alignSelf: 'center',
+ margin: '8px',
+ },
+ onClick: (event) => {
+ this.props.dispatch(actions.removeSuggestedTokens())
+ },
+ }, 'Cancel'),
+
+ h('button', {
+ style: {
+ alignSelf: 'center',
+ margin: '8px',
+ },
+ onClick: (event) => {
+ const valid = this.validateInputs({ address, symbol, decimals })
+ if (!valid) return
+
+ this.props.dispatch(actions.addToken(address.trim(), symbol.trim(), decimals))
+ .then(() => {
+ this.props.dispatch(actions.removeSuggestedTokens())
+ })
+ },
+ }, 'Add'),
+ ]),
+ ]),
+ ])
+ )
+}
+
+AddSuggestedTokenScreen.prototype.componentWillMount = function () {
+ if (typeof global.ethereumProvider === 'undefined') return
+}
+
+AddSuggestedTokenScreen.prototype.validateInputs = function (opts) {
+ let msg = ''
+ const identitiesList = Object.keys(this.props.identities)
+ const { address, symbol, decimals } = opts
+ const standardAddress = ethUtil.addHexPrefix(address).toLowerCase()
+
+ const validAddress = ethUtil.isValidAddress(address)
+ if (!validAddress) {
+ msg += 'Address is invalid.'
+ }
+
+ const validDecimals = decimals >= 0 && decimals <= 36
+ if (!validDecimals) {
+ msg += 'Decimals must be at least 0, and not over 36. '
+ }
+
+ const symbolLen = symbol.trim().length
+ const validSymbol = symbolLen > 0 && symbolLen < 10
+ if (!validSymbol) {
+ msg += 'Symbol must be between 0 and 10 characters.'
+ }
+
+ const ownAddress = identitiesList.includes(standardAddress)
+ if (ownAddress) {
+ msg = 'Personal address detected. Input the token contract address.'
+ }
+
+ const isValid = validAddress && validDecimals && !ownAddress
+
+ if (!isValid) {
+ this.setState({
+ warning: msg,
+ })
+ } else {
+ this.setState({ warning: null })
+ }
+
+ return isValid
+}
diff --git a/old-ui/app/app.js b/old-ui/app/app.js
index 170a5c520..a3aa70fd9 100644
--- a/old-ui/app/app.js
+++ b/old-ui/app/app.js
@@ -26,6 +26,7 @@ const ConfigScreen = require('./config')
const AddTokenScreen = require('./components/add-token')
const ConfirmAddTokenScreen = require('./components/confirm-add-token')
const RemoveTokenScreen = require('./remove-token')
+const AddSuggestedTokenScreen = require('./add-suggested-token')
const Import = require('./accounts/import')
const InfoScreen = require('./info')
const AppBar = require('./components/app-bar')
@@ -80,6 +81,7 @@ function mapStateToProps (state) {
lostAccounts: state.metamask.lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
featureFlags,
+ suggestedTokens: state.metamask.suggestedTokens,
// state needed to get account dropdown temporarily rendering from app bar
identities,
@@ -248,6 +250,10 @@ App.prototype.renderPrimary = function () {
log.debug('rendering remove-token screen from unlock screen.')
return h(RemoveTokenScreen, {key: 'remove-token', ...props.currentView.context })
+ case 'add-suggested-token':
+ log.debug('rendering add-suggested-token screen from unlock screen.')
+ return h(AddSuggestedTokenScreen, {key: 'add-suggested-token'})
+
case 'config':
log.debug('rendering config screen')
return h(ConfigScreen, {key: 'config'})
diff --git a/old-ui/app/components/notice.js b/old-ui/app/components/notice.js
index 79caa2c88..697b58681 100644
--- a/old-ui/app/components/notice.js
+++ b/old-ui/app/components/notice.js
@@ -124,6 +124,12 @@ Notice.prototype.render = function () {
)
}
+Notice.prototype.setInitialDisclaimerState = function () {
+ if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
+ this.setState({disclaimerDisabled: false})
+ }
+}
+
Notice.prototype.componentDidMount = function () {
// eslint-disable-next-line react/no-find-dom-node
var node = findDOMNode(this)
@@ -131,6 +137,16 @@ Notice.prototype.componentDidMount = function () {
if (document.getElementsByClassName('notice-box')[0].clientHeight < 300) {
this.setState({disclaimerDisabled: false})
}
+ this.setInitialDisclaimerState()
+}
+
+Notice.prototype.componentDidUpdate = function (prevProps) {
+ const { notice: { id } = {} } = this.props
+ const { notice: { id: prevNoticeId } = {} } = prevProps
+
+ if (id !== prevNoticeId) {
+ this.setInitialDisclaimerState()
+ }
}
Notice.prototype.componentWillUnmount = function () {
diff --git a/old-ui/app/components/pending-typed-msg-details.js b/old-ui/app/components/pending-typed-msg-details.js
index b5fd29f71..f95bf43a7 100644
--- a/old-ui/app/components/pending-typed-msg-details.js
+++ b/old-ui/app/components/pending-typed-msg-details.js
@@ -21,7 +21,7 @@ PendingMsgDetails.prototype.render = function () {
var identity = state.identities[address] || { address: address }
var account = state.accounts[address] || { address: address }
- var { data } = msgParams
+ var { data, version } = msgParams
return (
h('div', {
@@ -48,6 +48,7 @@ PendingMsgDetails.prototype.render = function () {
h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'),
h(TypedMessageRenderer, {
value: data,
+ version,
style: {
height: '215px',
},
diff --git a/old-ui/app/components/typed-message-renderer.js b/old-ui/app/components/typed-message-renderer.js
index 19e46f4fc..0dc673b8a 100644
--- a/old-ui/app/components/typed-message-renderer.js
+++ b/old-ui/app/components/typed-message-renderer.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const extend = require('xtend')
+const { ObjectInspector } = require('react-inspector')
module.exports = TypedMessageRenderer
@@ -12,8 +13,16 @@ function TypedMessageRenderer () {
TypedMessageRenderer.prototype.render = function () {
const props = this.props
- const { value, style } = props
- const text = renderTypedData(value)
+ const { value, version, style } = props
+ let text
+ switch (version) {
+ case 'V1':
+ text = renderTypedData(value)
+ break
+ case 'V3':
+ text = renderTypedDataV3(value)
+ break
+ }
const defaultStyle = extend({
width: '315px',
@@ -44,3 +53,17 @@ function renderTypedData (values) {
])
})
}
+
+function renderTypedDataV3 (values) {
+ const { domain, message } = JSON.parse(values)
+ return [
+ domain ? h('div', [
+ h('h1', 'Domain'),
+ h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
+ ]) : '',
+ message ? h('div', [
+ h('h1', 'Message'),
+ h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
+ ]) : '',
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
index dfcc89105..21af609db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1672,9 +1672,9 @@
}
},
"@zxing/library": {
- "version": "0.7.0",
- "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.7.0.tgz",
- "integrity": "sha512-VJ1cJaCWVF8MspnuyaZKGKlrSQLqQ5usgSap8uuCAvWGQ6W6OwN1NeGvnjhT+9hmnwkHK8XjaflvzaDBC7nKnw==",
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.8.0.tgz",
+ "integrity": "sha512-D7oopukr7cJ0Va01Er2zXiSPXvmvc6D1PpOq/THRvd/57yEsBs+setRsiDo7tSRnYHcw7FrRZSZ7rwyzNSLJeA==",
"requires": {
"text-encoding": "^0.6.4",
"ts-custom-error": "^2.2.1"
@@ -3963,6 +3963,7 @@
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/backoff/-/backoff-2.5.0.tgz",
"integrity": "sha1-9hbtqdPktmuMp/ynn2lXIsX44m8=",
+ "dev": true,
"requires": {
"precond": "0.2"
}
@@ -5188,7 +5189,7 @@
},
"chromedriver": {
"version": "2.36.0",
- "resolved": "http://registry.npmjs.org/chromedriver/-/chromedriver-2.36.0.tgz",
+ "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-2.36.0.tgz",
"integrity": "sha512-Lq2HrigCJ4RVdIdCmchenv1rVrejNSJ7EUCQojycQo12ww3FedQx4nb+GgTdqMhjbOMTqq5+ziaiZlrEN2z1gQ==",
"dev": true,
"requires": {
@@ -6115,6 +6116,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.1.0.tgz",
"integrity": "sha512-FTIt2WK44RiafWQ62xIvd+oBoVd392abh1lF872trLlA74JCR1s4oTHlixwoIKy44ehn8WbQ0Ds2P16sw7ZQxg==",
+ "dev": true,
"requires": {
"node-fetch": "2.1.1",
"whatwg-fetch": "2.0.3"
@@ -6123,7 +6125,8 @@
"node-fetch": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.1.1.tgz",
- "integrity": "sha1-NpynC4L1DIZJYQSmx3bSdPTkotQ="
+ "integrity": "sha1-NpynC4L1DIZJYQSmx3bSdPTkotQ=",
+ "dev": true
}
}
},
@@ -8297,88 +8300,62 @@
}
},
"eth-block-tracker": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/eth-block-tracker/-/eth-block-tracker-2.3.0.tgz",
- "integrity": "sha512-yrNyBIBKC7WfUjrXSG/CZVy0gW2aF8+MnjnrkOxkZOR+BAtL6JgYOnzVnrU8KE6mKJETlA/1dYMygvLXWyJGGw==",
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/eth-block-tracker/-/eth-block-tracker-4.0.1.tgz",
+ "integrity": "sha512-ytJxddJ0TMcJHYxPlgGhMyr5EH6/Kyp3bg0WsjXgY9X0uYX3xVHTTeU5WVX6KX+9oJ37ZLUjh5PZ6VYnF1Fx/Q==",
"requires": {
- "async-eventemitter": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "eth-json-rpc-infura": "^3.1.0",
"eth-query": "^2.1.0",
- "ethereumjs-tx": "^1.3.3",
- "ethereumjs-util": "^5.1.3",
- "ethjs-util": "^0.1.3",
- "json-rpc-engine": "^3.6.0",
- "pify": "^2.3.0",
- "tape": "^4.6.3"
+ "pify": "^3.0.0"
},
"dependencies": {
- "async-eventemitter": {
- "version": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
- "from": "async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "cross-fetch": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.2.2.tgz",
+ "integrity": "sha1-pH/09/xxLauo9qaVoRyUhEDUVyM=",
"requires": {
- "async": "^2.4.0"
+ "node-fetch": "2.1.2",
+ "whatwg-fetch": "2.0.4"
}
},
- "babel-preset-env": {
- "version": "1.6.1",
- "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.1.tgz",
- "integrity": "sha512-W6VIyA6Ch9ePMI7VptNn2wBM6dbG0eSz25HEiL40nQXCsXGTGZSTZu1Iap+cj3Q0S5a7T9+529l/5Bkvd+afNA==",
+ "eth-json-rpc-infura": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/eth-json-rpc-infura/-/eth-json-rpc-infura-3.1.2.tgz",
+ "integrity": "sha512-IuK5Iowfs6taluA/3Okmu6EfZcFMq6MQuyrUL1PrCoJstuuBr3TvVeSy3keDyxfbrjFB34nCo538I8G+qMtsbw==",
"requires": {
- "babel-plugin-check-es2015-constants": "^6.22.0",
- "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
- "babel-plugin-transform-async-to-generator": "^6.22.0",
- "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
- "babel-plugin-transform-es2015-block-scoped-functions": "^6.22.0",
- "babel-plugin-transform-es2015-block-scoping": "^6.23.0",
- "babel-plugin-transform-es2015-classes": "^6.23.0",
- "babel-plugin-transform-es2015-computed-properties": "^6.22.0",
- "babel-plugin-transform-es2015-destructuring": "^6.23.0",
- "babel-plugin-transform-es2015-duplicate-keys": "^6.22.0",
- "babel-plugin-transform-es2015-for-of": "^6.23.0",
- "babel-plugin-transform-es2015-function-name": "^6.22.0",
- "babel-plugin-transform-es2015-literals": "^6.22.0",
- "babel-plugin-transform-es2015-modules-amd": "^6.22.0",
- "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
- "babel-plugin-transform-es2015-modules-systemjs": "^6.23.0",
- "babel-plugin-transform-es2015-modules-umd": "^6.23.0",
- "babel-plugin-transform-es2015-object-super": "^6.22.0",
- "babel-plugin-transform-es2015-parameters": "^6.23.0",
- "babel-plugin-transform-es2015-shorthand-properties": "^6.22.0",
- "babel-plugin-transform-es2015-spread": "^6.22.0",
- "babel-plugin-transform-es2015-sticky-regex": "^6.22.0",
- "babel-plugin-transform-es2015-template-literals": "^6.22.0",
- "babel-plugin-transform-es2015-typeof-symbol": "^6.23.0",
- "babel-plugin-transform-es2015-unicode-regex": "^6.22.0",
- "babel-plugin-transform-exponentiation-operator": "^6.22.0",
- "babel-plugin-transform-regenerator": "^6.22.0",
- "browserslist": "^2.1.2",
- "invariant": "^2.2.2",
- "semver": "^5.3.0"
+ "cross-fetch": "^2.1.1",
+ "eth-json-rpc-middleware": "^1.5.0",
+ "json-rpc-engine": "^3.4.0",
+ "json-rpc-error": "^2.0.0",
+ "tape": "^4.8.0"
}
},
- "babelify": {
- "version": "7.3.0",
- "resolved": "https://registry.npmjs.org/babelify/-/babelify-7.3.0.tgz",
- "integrity": "sha1-qlau3nBn/XvVSWZu4W3ChQh+iOU=",
+ "eth-json-rpc-middleware": {
+ "version": "1.6.0",
+ "resolved": "http://registry.npmjs.org/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.6.0.tgz",
+ "integrity": "sha512-tDVCTlrUvdqHKqivYMjtFZsdD7TtpNLBCfKAcOpaVs7orBMS/A8HWro6dIzNtTZIR05FAbJ3bioFOnZpuCew9Q==",
"requires": {
- "babel-core": "^6.0.14",
- "object-assign": "^4.0.0"
- }
- },
- "browserslist": {
- "version": "2.11.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
- "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
- "requires": {
- "caniuse-lite": "^1.0.30000792",
- "electron-to-chromium": "^1.3.30"
+ "async": "^2.5.0",
+ "eth-query": "^2.1.2",
+ "eth-tx-summary": "^3.1.2",
+ "ethereumjs-block": "^1.6.0",
+ "ethereumjs-tx": "^1.3.3",
+ "ethereumjs-util": "^5.1.2",
+ "ethereumjs-vm": "^2.1.0",
+ "fetch-ponyfill": "^4.0.0",
+ "json-rpc-engine": "^3.6.0",
+ "json-rpc-error": "^2.0.0",
+ "json-stable-stringify": "^1.0.1",
+ "promise-to-callback": "^1.0.0",
+ "tape": "^4.6.3"
}
},
"ethereumjs-util": {
- "version": "5.1.3",
- "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.1.3.tgz",
- "integrity": "sha512-U/wmHagElZVxnpo3bFsvk5beFADegUcEzqtA/NfQbitAPOs6JoYq8M4SY9NfH4HD8236i63UOkkXafd7bqBL9A==",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+ "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
"requires": {
- "bn.js": "^4.8.0",
+ "bn.js": "^4.11.0",
"create-hash": "^1.1.2",
"ethjs-util": "^0.1.3",
"keccak": "^1.0.2",
@@ -8387,22 +8364,15 @@
"secp256k1": "^3.0.1"
}
},
- "json-rpc-engine": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/json-rpc-engine/-/json-rpc-engine-3.6.0.tgz",
- "integrity": "sha512-QGEIIPMaG4lQ8iKQgzKq7Ra6hscqSL+6S+xiUFbNAoVaZII8iyN1l6tJHmUWIdbnl2o0rbwCnOPFAhTn9AJObw==",
- "requires": {
- "async": "^2.0.1",
- "babel-preset-env": "^1.3.2",
- "babelify": "^7.3.0",
- "json-rpc-error": "^2.0.0",
- "promise-to-callback": "^1.0.0"
- }
+ "node-fetch": {
+ "version": "2.1.2",
+ "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
+ "integrity": "sha1-q4hOjn5X44qUR1POxwb3iNF2i7U="
},
- "pify": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
- "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+ "whatwg-fetch": {
+ "version": "2.0.4",
+ "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+ "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
}
}
},
@@ -8529,6 +8499,24 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
+ }
+ },
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
}
}
}
@@ -8598,32 +8586,92 @@
"json-rpc-engine": "^3.4.0",
"json-rpc-error": "^2.0.0",
"tape": "^4.8.0"
+ },
+ "dependencies": {
+ "eth-json-rpc-middleware": {
+ "version": "1.6.0",
+ "resolved": "http://registry.npmjs.org/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.6.0.tgz",
+ "integrity": "sha512-tDVCTlrUvdqHKqivYMjtFZsdD7TtpNLBCfKAcOpaVs7orBMS/A8HWro6dIzNtTZIR05FAbJ3bioFOnZpuCew9Q==",
+ "requires": {
+ "async": "^2.5.0",
+ "eth-query": "^2.1.2",
+ "eth-tx-summary": "^3.1.2",
+ "ethereumjs-block": "^1.6.0",
+ "ethereumjs-tx": "^1.3.3",
+ "ethereumjs-util": "^5.1.2",
+ "ethereumjs-vm": "^2.1.0",
+ "fetch-ponyfill": "^4.0.0",
+ "json-rpc-engine": "^3.6.0",
+ "json-rpc-error": "^2.0.0",
+ "json-stable-stringify": "^1.0.1",
+ "promise-to-callback": "^1.0.0",
+ "tape": "^4.6.3"
+ }
+ },
+ "ethereumjs-util": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+ "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
+ "requires": {
+ "bn.js": "^4.11.0",
+ "create-hash": "^1.1.2",
+ "ethjs-util": "^0.1.3",
+ "keccak": "^1.0.2",
+ "rlp": "^2.0.0",
+ "safe-buffer": "^5.1.1",
+ "secp256k1": "^3.0.1"
+ }
+ }
}
},
"eth-json-rpc-middleware": {
- "version": "1.6.0",
- "resolved": "https://registry.npmjs.org/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.6.0.tgz",
- "integrity": "sha512-tDVCTlrUvdqHKqivYMjtFZsdD7TtpNLBCfKAcOpaVs7orBMS/A8HWro6dIzNtTZIR05FAbJ3bioFOnZpuCew9Q==",
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/eth-json-rpc-middleware/-/eth-json-rpc-middleware-2.4.0.tgz",
+ "integrity": "sha512-KUxyz7pr6MZmFlsym8EObWwrFHVxRCLHGfl8H2V7D4ZjK0yhoPaA94jSXAumUbfx2AmyYEtG9j2xmU1P83m7OQ==",
+ "dev": true,
"requires": {
"async": "^2.5.0",
+ "clone": "^2.1.1",
"eth-query": "^2.1.2",
+ "eth-sig-util": "^1.4.2",
"eth-tx-summary": "^3.1.2",
"ethereumjs-block": "^1.6.0",
"ethereumjs-tx": "^1.3.3",
"ethereumjs-util": "^5.1.2",
"ethereumjs-vm": "^2.1.0",
"fetch-ponyfill": "^4.0.0",
- "json-rpc-engine": "^3.6.0",
+ "json-rpc-engine": "^3.6.3",
"json-rpc-error": "^2.0.0",
"json-stable-stringify": "^1.0.1",
+ "pify": "^3.0.0",
"promise-to-callback": "^1.0.0",
"tape": "^4.6.3"
},
"dependencies": {
+ "eth-sig-util": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz",
+ "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=",
+ "dev": true,
+ "requires": {
+ "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "ethereumjs-util": "^5.1.1"
+ }
+ },
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "dev": true,
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ },
"ethereumjs-util": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
"integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
+ "dev": true,
"requires": {
"bn.js": "^4.11.0",
"create-hash": "^1.1.2",
@@ -8672,12 +8720,22 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "dev": true,
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
}
},
"ethereumjs-abi": {
"version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
- "dev": true,
"requires": {
"bn.js": "^4.10.0",
"ethereumjs-util": "^5.0.0"
@@ -8687,7 +8745,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
"integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
- "dev": true,
"requires": {
"bn.js": "^4.11.0",
"create-hash": "^1.1.2",
@@ -8732,6 +8789,16 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
}
},
"ethereum-common": {
@@ -8934,13 +9001,13 @@
"resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-2.0.2.tgz",
"integrity": "sha512-tB6E8jf/aZQ943bo3+iojl8xRe3Jzcl+9OT6v8K7kWis6PdIX19SB2vYvN849cB9G9m/XLjYFK381SgdbsnpTA==",
"requires": {
- "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "ethereumjs-abi": "0.6.5",
"ethereumjs-util": "^5.1.1"
},
"dependencies": {
"ethereumjs-abi": {
- "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
- "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "version": "0.6.5",
+ "resolved": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"requires": {
"bn.js": "^4.10.0",
"ethereumjs-util": "^5.0.0"
@@ -9205,6 +9272,16 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
}
},
"ethereum-common": {
@@ -9336,6 +9413,11 @@
}
}
},
+ "pify": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+ },
"web3-provider-engine": {
"version": "13.8.0",
"resolved": "https://registry.npmjs.org/web3-provider-engine/-/web3-provider-engine-13.8.0.tgz",
@@ -9362,6 +9444,28 @@
"xtend": "^4.0.1"
},
"dependencies": {
+ "async-eventemitter": {
+ "version": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "from": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "requires": {
+ "async": "^2.4.0"
+ }
+ },
+ "eth-block-tracker": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/eth-block-tracker/-/eth-block-tracker-2.3.1.tgz",
+ "integrity": "sha512-NamWuMBIl8kmkJFVj8WzGatySTzQPQag4Xr677yFxdVtIxACFbL/dQowk0MzEqIKk93U1TwY3MjVU6mOcwZnKA==",
+ "requires": {
+ "async-eventemitter": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "eth-query": "^2.1.0",
+ "ethereumjs-tx": "^1.3.3",
+ "ethereumjs-util": "^5.1.3",
+ "ethjs-util": "^0.1.3",
+ "json-rpc-engine": "^3.6.0",
+ "pify": "^2.3.0",
+ "tape": "^4.6.3"
+ }
+ },
"eth-sig-util": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz",
@@ -9369,6 +9473,24 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
+ }
+ },
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
}
},
"ethereumjs-util": {
@@ -10196,6 +10318,52 @@
"extensionizer": "^1.0.0"
}
},
+ "extension-port-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/extension-port-stream/-/extension-port-stream-1.0.0.tgz",
+ "integrity": "sha512-FsFr64yr6ituPdaGP6Io5recGFWVjJoDYt7asz2AvPkYqGN9c923nmEtyHH+413066bjGcQZaF8w5wn9HbNXiQ==",
+ "requires": {
+ "readable-stream": "^2.3.6",
+ "util": "^0.11.0"
+ },
+ "dependencies": {
+ "process-nextick-args": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+ "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+ },
+ "readable-stream": {
+ "version": "2.3.6",
+ "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+ "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+ "requires": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
+ }
+ },
+ "string_decoder": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "requires": {
+ "safe-buffer": "~5.1.0"
+ }
+ },
+ "util": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/util/-/util-0.11.0.tgz",
+ "integrity": "sha512-5n12uMzKCjvB2HPFHnbQSjaqAa98L5iIXmHrZCLavuZVe0qe/SJGbDGWlpaHk5lnBkWRDO+dRu1/PgmUYKPPTw==",
+ "requires": {
+ "inherits": "2.0.3"
+ }
+ }
+ }
+ },
"extensionizer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/extensionizer/-/extensionizer-1.0.1.tgz",
@@ -12181,8 +12349,7 @@
"bn.js": {
"version": "4.11.6",
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.6.tgz",
- "integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU=",
- "dev": true
+ "integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU="
},
"chai": {
"version": "3.5.0",
@@ -12273,6 +12440,46 @@
"node-fetch": "2.1.2",
"whatwg-fetch": "2.0.4"
}
+ },
+ "eth-json-rpc-middleware": {
+ "version": "1.6.0",
+ "resolved": "http://registry.npmjs.org/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.6.0.tgz",
+ "integrity": "sha512-tDVCTlrUvdqHKqivYMjtFZsdD7TtpNLBCfKAcOpaVs7orBMS/A8HWro6dIzNtTZIR05FAbJ3bioFOnZpuCew9Q==",
+ "dev": true,
+ "requires": {
+ "async": "^2.5.0",
+ "eth-query": "^2.1.2",
+ "eth-tx-summary": "^3.1.2",
+ "ethereumjs-block": "^1.6.0",
+ "ethereumjs-tx": "^1.3.3",
+ "ethereumjs-util": "^5.1.2",
+ "ethereumjs-vm": "^2.1.0",
+ "fetch-ponyfill": "^4.0.0",
+ "json-rpc-engine": "^3.6.0",
+ "json-rpc-error": "^2.0.0",
+ "json-stable-stringify": "^1.0.1",
+ "promise-to-callback": "^1.0.0",
+ "tape": "^4.6.3"
+ }
+ },
+ "ethereum-common": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/ethereum-common/-/ethereum-common-0.2.0.tgz",
+ "integrity": "sha512-XOnAR/3rntJgbCdGhqdaLIxDLWKLmsZOGhHdBKadEr6gEnJLH52k93Ou+TUdFaPN3hJc3isBZBal3U/XZ15abA==",
+ "dev": true
+ },
+ "ethereumjs-block": {
+ "version": "1.7.1",
+ "resolved": "http://registry.npmjs.org/ethereumjs-block/-/ethereumjs-block-1.7.1.tgz",
+ "integrity": "sha512-B+sSdtqm78fmKkBq78/QLKJbu/4Ts4P2KFISdgcuZUPDm9x+N7qgBPIIFUGbaakQh8bzuquiRVbdmvPKqbILRg==",
+ "dev": true,
+ "requires": {
+ "async": "^2.0.1",
+ "ethereum-common": "0.2.0",
+ "ethereumjs-tx": "^1.2.2",
+ "ethereumjs-util": "^5.0.0",
+ "merkle-patricia-tree": "^2.1.2"
+ }
}
}
},
@@ -12285,7 +12492,6 @@
"ethereumjs-abi": {
"version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
- "dev": true,
"requires": {
"bn.js": "^4.10.0",
"ethereumjs-util": "^5.0.0"
@@ -12380,7 +12586,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
"integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
- "dev": true,
"requires": {
"bn.js": "^4.11.0",
"create-hash": "^1.1.2",
@@ -12559,6 +12764,17 @@
"requires": {
"ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
"ethereumjs-util": "^5.1.1"
+ },
+ "dependencies": {
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
+ "dev": true,
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ }
}
},
"ethereum-common": {
@@ -12567,6 +12783,14 @@
"integrity": "sha1-L9w1dvIykDNYl26znaeDIT/5Uj8=",
"dev": true
},
+ "ethereumjs-abi": {
+ "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
+ "requires": {
+ "bn.js": "^4.10.0",
+ "ethereumjs-util": "^5.0.0"
+ }
+ },
"ethereumjs-tx": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/ethereumjs-tx/-/ethereumjs-tx-1.3.3.tgz",
@@ -16087,8 +16311,7 @@
"is-dom": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/is-dom/-/is-dom-1.0.9.tgz",
- "integrity": "sha1-SDgy1SlyBz3hK5/j9gMghw2oNw0=",
- "dev": true
+ "integrity": "sha1-SDgy1SlyBz3hK5/j9gMghw2oNw0="
},
"is-dotfile": {
"version": "1.0.3",
@@ -17056,11 +17279,47 @@
"readable-stream": "^2.3.3"
},
"dependencies": {
+ "async-eventemitter": {
+ "version": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "from": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "requires": {
+ "async": "^2.4.0"
+ }
+ },
"bn.js": {
"version": "4.11.6",
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.6.tgz",
"integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU="
},
+ "eth-block-tracker": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/eth-block-tracker/-/eth-block-tracker-2.3.1.tgz",
+ "integrity": "sha512-NamWuMBIl8kmkJFVj8WzGatySTzQPQag4Xr677yFxdVtIxACFbL/dQowk0MzEqIKk93U1TwY3MjVU6mOcwZnKA==",
+ "requires": {
+ "async-eventemitter": "github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c",
+ "eth-query": "^2.1.0",
+ "ethereumjs-tx": "^1.3.3",
+ "ethereumjs-util": "^5.1.3",
+ "ethjs-util": "^0.1.3",
+ "json-rpc-engine": "^3.6.0",
+ "pify": "^2.3.0",
+ "tape": "^4.6.3"
+ }
+ },
+ "ethereumjs-util": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz",
+ "integrity": "sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA==",
+ "requires": {
+ "bn.js": "^4.11.0",
+ "create-hash": "^1.1.2",
+ "ethjs-util": "^0.1.3",
+ "keccak": "^1.0.2",
+ "rlp": "^2.0.0",
+ "safe-buffer": "^5.1.1",
+ "secp256k1": "^3.0.1"
+ }
+ },
"ethjs-format": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/ethjs-format/-/ethjs-format-0.2.2.tgz",
@@ -17096,6 +17355,11 @@
"is-hex-prefixed": "1.0.0",
"strip-hex-prefix": "1.0.0"
}
+ },
+ "pify": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
}
}
},
@@ -17132,6 +17396,14 @@
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
},
+ "json2mq": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+ "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+ "requires": {
+ "string-convert": "^0.2.0"
+ }
+ },
"json3": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -17242,6 +17514,11 @@
"dev": true,
"optional": true
},
+ "jsonschema": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.2.4.tgz",
+ "integrity": "sha512-lz1nOH69GbsVHeVgEdvyavc/33oymY1AZwtePMiMj4HZPMbP5OIKK3zT9INMWjwua/V4Z4yq7wSlBbSG+g4AEw=="
+ },
"jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -19931,6 +20208,26 @@
}
}
},
+ "metamask-inpage-provider": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/metamask-inpage-provider/-/metamask-inpage-provider-1.0.0.tgz",
+ "integrity": "sha512-8ouTHzBuMb5DlsJstb3ikeA53zKk01ebcXEy3vHzg48MBO8sqHyFII37KYBkzkZ+ZkvouhmxMVCO+n8qo1oTmQ==",
+ "requires": {
+ "json-rpc-engine": "^3.7.3",
+ "json-rpc-middleware-stream": "^1.0.1",
+ "loglevel": "^1.6.1",
+ "obj-multiplex": "^1.0.0",
+ "obs-store": "^3.0.0",
+ "pump": "^3.0.0"
+ },
+ "dependencies": {
+ "loglevel": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
+ "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po="
+ }
+ }
+ },
"methods": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -25221,7 +25518,8 @@
"precond": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/precond/-/precond-0.2.3.tgz",
- "integrity": "sha1-qpWRvKokkj8eD0hJ0kD0fvwQdaw="
+ "integrity": "sha1-qpWRvKokkj8eD0hJ0kD0fvwQdaw=",
+ "dev": true
},
"prelude-ls": {
"version": "1.1.2",
@@ -26191,7 +26489,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-2.3.0.tgz",
"integrity": "sha512-aIcbWb0fKFhEMB+RadoOYawlr1JoMMfrQ1oRgPUG/f/e4zERVJ6nYcIaQmrQmdHCZ63BOqe2cEkoeY0kyLBzNg==",
- "dev": true,
"requires": {
"babel-runtime": "^6.26.0",
"is-dom": "^1.0.9"
@@ -26232,6 +26529,16 @@
"xtend": "^4.0.1"
}
},
+ "react-media": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/react-media/-/react-media-1.8.0.tgz",
+ "integrity": "sha512-XcfqkDQj5/hmJod/kXUAZljJyMVkWrBWOkzwynAR8BXOGlbFLGBwezM0jQHtp2BrSymhf14/XrQrb3gGBnGK4g==",
+ "requires": {
+ "invariant": "^2.2.2",
+ "json2mq": "^0.2.0",
+ "prop-types": "^15.5.10"
+ }
+ },
"react-modal": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.4.4.tgz",
@@ -29121,6 +29428,11 @@
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
},
+ "string-convert": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+ "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+ },
"string-length": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -29947,6 +30259,11 @@
}
}
},
+ "swappable-obj-proxy": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/swappable-obj-proxy/-/swappable-obj-proxy-1.1.0.tgz",
+ "integrity": "sha512-bXbKO85b0YNbZi/61TjRAbNtY49ABKu7rQ4k2+RFXPL7TA2mphttfqAqCeJ+lrlKlkYc5pvm6erFk6vOWJSpdw=="
+ },
"swarm-js": {
"version": "0.1.37",
"resolved": "https://registry.npmjs.org/swarm-js/-/swarm-js-0.1.37.tgz",
@@ -32269,124 +32586,6 @@
"web3-utils": "1.0.0-beta.34"
}
},
- "web3-provider-engine": {
- "version": "14.0.5",
- "resolved": "https://registry.npmjs.org/web3-provider-engine/-/web3-provider-engine-14.0.5.tgz",
- "integrity": "sha512-1W/ue7VOwOMnmKgMY3HCpbixi6qhfl4r1dK8W597AwJLbrQ+twJKwWlFAedDpJjCc9MwRCCB3pyexW4HJVSiBg==",
- "requires": {
- "async": "^2.5.0",
- "backoff": "^2.5.0",
- "clone": "^2.0.0",
- "cross-fetch": "^2.1.0",
- "eth-block-tracker": "^3.0.0",
- "eth-json-rpc-infura": "^3.1.0",
- "eth-sig-util": "^1.4.2",
- "ethereumjs-block": "^1.2.2",
- "ethereumjs-tx": "^1.2.0",
- "ethereumjs-util": "^5.1.5",
- "ethereumjs-vm": "^2.3.4",
- "json-rpc-error": "^2.0.0",
- "json-stable-stringify": "^1.0.1",
- "promise-to-callback": "^1.0.0",
- "readable-stream": "^2.2.9",
- "request": "^2.67.0",
- "semaphore": "^1.0.3",
- "tape": "^4.4.0",
- "ws": "^5.1.1",
- "xhr": "^2.2.0",
- "xtend": "^4.0.1"
- },
- "dependencies": {
- "eth-block-tracker": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/eth-block-tracker/-/eth-block-tracker-3.0.0.tgz",
- "integrity": "sha512-Lhhu/+1GOeekMRDRhUcM7VSJRmX279DByrwzEbmG0JL1tcT3xRo6GLNXnidyJ7ahHJm+0JFhw/RqtTeIxagQwA==",
- "requires": {
- "eth-query": "^2.1.0",
- "ethereumjs-tx": "^1.3.3",
- "ethereumjs-util": "^5.1.3",
- "ethjs-util": "^0.1.3",
- "json-rpc-engine": "^3.6.0",
- "pify": "^2.3.0",
- "tape": "^4.6.3"
- }
- },
- "eth-json-rpc-infura": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/eth-json-rpc-infura/-/eth-json-rpc-infura-3.1.0.tgz",
- "integrity": "sha512-uMYkEP6fga8CyNo8TMoA/7cxi6bL3V8pTvjKQikOi9iYl6/AO5xlfgniyAMElSiq2mmXz3lYa/9VYDMzt/J5aA==",
- "requires": {
- "cross-fetch": "^2.1.0",
- "eth-json-rpc-middleware": "^1.5.0",
- "json-rpc-engine": "^3.4.0",
- "json-rpc-error": "^2.0.0",
- "tape": "^4.8.0"
- }
- },
- "eth-sig-util": {
- "version": "1.4.2",
- "resolved": "https://registry.npmjs.org/eth-sig-util/-/eth-sig-util-1.4.2.tgz",
- "integrity": "sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=",
- "requires": {
- "ethereumjs-abi": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
- "ethereumjs-util": "^5.1.1"
- }
- },
- "ethereumjs-abi": {
- "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#00ba8463a7f7a67fcad737ff9c2ebd95643427f7",
- "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
- "requires": {
- "bn.js": "^4.10.0",
- "ethereumjs-util": "^5.0.0"
- }
- },
- "ethereumjs-util": {
- "version": "5.1.5",
- "resolved": "https://registry.npmjs.org/ethereumjs-util/-/ethereumjs-util-5.1.5.tgz",
- "integrity": "sha512-xPaSEATYJpMTCGowIt0oMZwFP4R1bxd6QsWgkcDvFL0JtXsr39p32WEcD14RscCjfP41YXZPCVWA4yAg0nrJmw==",
- "requires": {
- "bn.js": "^4.11.0",
- "create-hash": "^1.1.2",
- "ethjs-util": "^0.1.3",
- "keccak": "^1.0.2",
- "rlp": "^2.0.0",
- "safe-buffer": "^5.1.1",
- "secp256k1": "^3.0.1"
- }
- },
- "ethereumjs-vm": {
- "version": "2.3.5",
- "resolved": "https://registry.npmjs.org/ethereumjs-vm/-/ethereumjs-vm-2.3.5.tgz",
- "integrity": "sha512-AJ7x44+xqyE5+UO3Nns19WkTdZfyqFZ+sEjIEpvme7Ipbe3iBU1uwCcHEdiu/yY9bdhr3IfSa/NfIKNeXPaRVQ==",
- "requires": {
- "async": "^2.1.2",
- "async-eventemitter": "^0.2.2",
- "ethereum-common": "0.2.0",
- "ethereumjs-account": "^2.0.3",
- "ethereumjs-block": "~1.7.0",
- "ethereumjs-util": "^5.1.3",
- "fake-merkle-patricia-tree": "^1.0.1",
- "functional-red-black-tree": "^1.0.1",
- "merkle-patricia-tree": "^2.1.2",
- "rustbn.js": "~0.1.1",
- "safe-buffer": "^5.1.1"
- }
- },
- "pify": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
- "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
- },
- "ws": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/ws/-/ws-5.1.1.tgz",
- "integrity": "sha512-bOusvpCb09TOBLbpMKszd45WKC2KPtxiyiHanv+H2DE3Az+1db5a/L7sVJZVDPUC1Br8f0SKRr1KjLpD1U/IAw==",
- "requires": {
- "async-limiter": "~1.0.0"
- }
- }
- }
- },
"web3-providers-http": {
"version": "1.0.0-beta.34",
"resolved": "https://registry.npmjs.org/web3-providers-http/-/web3-providers-http-1.0.0-beta.34.tgz",
diff --git a/package.json b/package.json
index 03b6990e6..44572c492 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"mascara": "gulp dev:mascara & node ./mascara/example/server",
"dist": "gulp dist",
"doc": "jsdoc -c development/tools/.jsdoc.json",
+ "publish-docs": "gh-pages -d docs/jsdocs",
"test": "npm run test:unit && npm run test:integration && npm run lint",
"watch:test:unit": "nodemon --exec \"npm run test:unit\" ./test ./app ./ui",
"test:unit": "cross-env METAMASK_ENV=test mocha --exit --require test/setup.js --recursive \"test/unit/**/*.js\" \"ui/app/**/*.test.js\" && dot-only-hunter",
@@ -22,7 +23,7 @@
"test:e2e:run:firefox": "SELENIUM_BROWSER=firefox mocha test/e2e/metamask.spec --bail --recursive",
"test:screens": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:screens:run'",
"test:screens:run": "node test/screens/new-ui.js",
- "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
+ "test:coverage": "nyc --reporter=text --reporter=html 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 && npm run test:flat:build:locales",
@@ -36,7 +37,7 @@
"test:mascara:build:locales": "mkdirp dist/chrome && cp -R app/_locales dist/chrome/_locales",
"test:mascara:build:background": "browserify mascara/src/background.js -o dist/mascara/background.js",
"test:mascara:build:tests": "browserify test/integration/lib/first-time.js -o dist/mascara/tests.js",
- "ganache:start": "ganache-cli -m 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent'",
+ "ganache:start": "ganache-cli --noVMErrorsOnRPCResponse -m 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent'",
"sentry:publish": "node ./development/sentry-publish.js",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
@@ -57,7 +58,11 @@
[
"env",
{
- "debug": true
+ "browsers": [
+ ">0.25%",
+ "not ie 11",
+ "not op_mini all"
+ ]
}
],
"stage-0"
@@ -75,7 +80,7 @@
},
"dependencies": {
"@material-ui/core": "1.0.0",
- "@zxing/library": "^0.7.0",
+ "@zxing/library": "^0.8.0",
"abi-decoder": "^1.0.9",
"asmcrypto.js": "0.22.0",
"async": "^2.5.0",
@@ -105,11 +110,13 @@
"ensnare": "^1.0.0",
"eslint-plugin-react": "^7.4.0",
"eth-bin-to-ops": "^1.0.1",
+ "eth-block-tracker": "^4.0.1",
"eth-contract-metadata": "github:MetaMask/eth-contract-metadata#master",
"eth-ens-namehash": "^2.0.8",
"eth-hd-keyring": "^2.0.0",
"eth-json-rpc-filters": "^3.0.1",
"eth-json-rpc-infura": "^3.0.0",
+ "eth-keyring-controller": "^3.1.4",
"eth-ledger-bridge-keyring": "^0.1.0",
"eth-method-registry": "^1.0.0",
"eth-net-props": "^1.0.7",
@@ -128,6 +135,7 @@
"ethjs-query": "^0.3.4",
"express": "^4.15.5",
"extension-link-enabler": "^1.0.0",
+ "extension-port-stream": "^1.0.0",
"extensionizer": "^1.0.1",
"fast-json-patch": "^2.0.4",
"fast-levenshtein": "^2.0.6",
@@ -149,12 +157,14 @@
"inject-css": "^0.1.1",
"json-rpc-engine": "^3.8.0",
"json-rpc-middleware-stream": "^1.0.1",
+ "jsonschema": "^1.2.4",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.shuffle": "^4.2.0",
"lodash.uniqby": "^4.7.0",
"loglevel": "^1.4.1",
"metamascara": "^2.0.0",
+ "metamask-inpage-provider": "^1.0.0",
"mkdirp": "^0.5.1",
"multihashes": "^0.4.12",
"multiplex": "^6.7.0",
@@ -180,7 +190,9 @@
"react-addons-css-transition-group": "^15.6.0",
"react-dom": "^15.6.2",
"react-hyperscript": "^3.0.0",
+ "react-inspector": "^2.3.0",
"react-markdown": "^3.0.0",
+ "react-media": "^1.8.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.2.2",
"react-select": "^1.0.0",
@@ -205,10 +217,10 @@
"shallow-copy": "0.0.1",
"sw-controller": "^1.0.3",
"sw-stream": "^2.0.2",
+ "swappable-obj-proxy": "^1.1.0",
"valid-url": "^1.0.9",
"vreme": "^3.0.2",
"web3": "^0.20.1",
- "web3-provider-engine": "^14.0.5",
"web3-stream-provider": "^3.0.1",
"webrtc-adapter": "^6.3.0",
"xtend": "^4.0.1"
@@ -248,9 +260,10 @@
"eslint-plugin-json": "^1.2.0",
"eslint-plugin-mocha": "^5.0.0",
"eslint-plugin-react": "^7.4.0",
- "eth-json-rpc-middleware": "^1.6.0",
+ "eth-json-rpc-middleware": "^2.4.0",
"eth-keychain-controller": "^5.0.0",
"file-loader": "^1.1.11",
+ "fs-extra": "^6.0.1",
"fs-promise": "^2.0.3",
"ganache-cli": "^6.1.0",
"ganache-core": "^2.1.5",
@@ -295,6 +308,7 @@
"open": "0.0.5",
"path": "^0.12.7",
"png-file-stream": "^1.0.0",
+ "prepend-file": "^1.3.1",
"prompt": "^1.0.0",
"proxyquire": "2.0.1",
"qs": "^6.2.0",
diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index 1261b6f95..32aaa29a6 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -314,12 +314,12 @@ describe('Using MetaMask with an existing account', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)
- assert.equal(await txValues[0].getText(), '1 ETH')
+ assert.equal(await txValues[0].getText(), '-1 ETH')
})
})
diff --git a/test/e2e/beta/helpers.js b/test/e2e/beta/helpers.js
index d90cd5d66..73289e526 100644
--- a/test/e2e/beta/helpers.js
+++ b/test/e2e/beta/helpers.js
@@ -2,8 +2,8 @@ const fs = require('fs')
const mkdirp = require('mkdirp')
const pify = require('pify')
const assert = require('assert')
-const {until} = require('selenium-webdriver')
const { delay } = require('../func')
+const { until } = require('selenium-webdriver')
module.exports = {
assertElementNotPresent,
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 43300bda6..7370f1a92 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -225,19 +225,9 @@ describe('MetaMask', function () {
await delay(regularDelayMs)
}
- await clickWordAndWait(words[0])
- await clickWordAndWait(words[1])
- await clickWordAndWait(words[2])
- await clickWordAndWait(words[3])
- await clickWordAndWait(words[4])
- await clickWordAndWait(words[5])
- await clickWordAndWait(words[6])
- await clickWordAndWait(words[7])
- await clickWordAndWait(words[8])
- await clickWordAndWait(words[9])
- await clickWordAndWait(words[10])
- await clickWordAndWait(words[11])
-
+ for (let i = 0; i < 12; i++) {
+ await clickWordAndWait(words[i])
+ }
} catch (e) {
if (count > 2) {
throw e
@@ -414,12 +404,12 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /1\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues, /-1\sETH/), 10000)
}
})
})
@@ -457,16 +447,11 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 2)
- await findElement(driver, By.xpath(`//span[contains(text(), 'Submitted')]`))
-
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
-
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues, /-3\sETH/), 10000)
})
})
@@ -489,9 +474,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const txListItem = await findElement(driver, By.xpath(`//span[contains(text(), 'Contract Deployment')]`))
+ const txListItem = await findElement(driver, By.xpath(`//div[contains(text(), 'Contract Deployment')]`))
await txListItem.click()
- await delay(regularDelayMs)
+ await delay(largeDelayMs)
})
it('displays the contract creation data', async () => {
@@ -513,15 +498,15 @@ describe('MetaMask', function () {
it('confirms a deploy contract transaction', async () => {
const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
await confirmButton.click()
- await delay(regularDelayMs)
+ await delay(largeDelayMs)
- await findElement(driver, By.xpath(`//span[contains(text(), 'Submitted')]`))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 3
+ }, 10000)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
-
- const txAccounts = await findElements(driver, By.css('.tx-list-account'))
- assert.equal(await txAccounts[0].getText(), 'Contract Deployment')
+ const txAction = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txAction[0], /Contract\sDeployment/), 10000)
await delay(regularDelayMs)
})
@@ -542,9 +527,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(largeDelayMs)
- await findElements(driver, By.css('.tx-list-pending-item-container'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /4\sETH/), 10000)
+ await findElements(driver, By.css('.transaction-list-item'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-4\sETH/), 10000)
await txListValue.click()
await delay(regularDelayMs)
@@ -572,15 +557,17 @@ describe('MetaMask', function () {
await confirmButton.click()
await delay(regularDelayMs)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 4
+ }, 10000)
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /4\sETH/), 10000)
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-4\sETH/), 10000)
- const txAccounts = await findElements(driver, By.css('.tx-list-account'))
- const firstTxAddress = await txAccounts[0].getText()
- assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/))
+ // const txAccounts = await findElements(driver, By.css('.tx-list-account'))
+ // const firstTxAddress = await txAccounts[0].getText()
+ // assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/))
})
it('calls and confirms a contract method where ETH is received', async () => {
@@ -594,7 +581,7 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const txListItem = await findElement(driver, By.css('.tx-list-item'))
+ const txListItem = await findElement(driver, By.css('.transaction-list-item'))
await txListItem.click()
await delay(regularDelayMs)
@@ -602,18 +589,20 @@ describe('MetaMask', function () {
await confirmButton.click()
await delay(regularDelayMs)
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 5
+ }, 10000)
- const txValues = await findElement(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues, /0\sETH/), 10000)
+ const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues, /-0\sETH/), 10000)
await closeAllWindowHandlesExcept(driver, [extension, dapp])
await driver.switchTo().window(extension)
})
it('renders the correct ETH balance', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance'))
await delay(regularDelayMs)
if (process.env.SELENIUM_BROWSER !== 'firefox') {
await driver.wait(until.elementTextMatches(balance, /^92.*ETH.*$/), 10000)
@@ -626,20 +615,21 @@ describe('MetaMask', function () {
describe('Add a custom token from a dapp', () => {
it('creates a new token', async () => {
- const windowHandles = await driver.getAllWindowHandles()
+ let windowHandles = await driver.getAllWindowHandles()
const extension = windowHandles[0]
const dapp = windowHandles[1]
await delay(regularDelayMs * 2)
await driver.switchTo().window(dapp)
- await delay(regularDelayMs)
+ await delay(regularDelayMs * 2)
const createToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Create Token')]`))
await createToken.click()
- await delay(regularDelayMs)
+ await delay(largeDelayMs)
- await driver.switchTo().window(extension)
- await loadExtension(driver, extensionId)
+ windowHandles = await driver.getAllWindowHandles()
+ const popup = windowHandles[2]
+ await driver.switchTo().window(popup)
await delay(regularDelayMs)
const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
@@ -657,18 +647,17 @@ describe('MetaMask', function () {
await closeAllWindowHandlesExcept(driver, [extension, dapp])
await delay(regularDelayMs)
await driver.switchTo().window(extension)
- await delay(regularDelayMs)
-
+ await delay(largeDelayMs)
})
it('clicks on the Add Token button', async () => {
- const addToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Add Token')]`))
+ const addToken = await driver.findElement(By.css('.wallet-view__add-token-button'))
await addToken.click()
await delay(regularDelayMs)
})
it('picks the newly created Test token', async () => {
- const addCustomToken = await findElement(driver, By.xpath("//div[contains(text(), 'Custom Token')]"))
+ const addCustomToken = await findElement(driver, By.xpath("//li[contains(text(), 'Custom Token')]"))
await addCustomToken.click()
await delay(regularDelayMs)
@@ -686,7 +675,7 @@ describe('MetaMask', function () {
})
it('renders the balance for the new token', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance .transaction-view-balance__token-balance'))
await driver.wait(until.elementTextMatches(balance, /^100\s*TST\s*$/))
const tokenAmount = await balance.getText()
assert.ok(/^100\s*TST\s*$/.test(tokenAmount))
@@ -755,21 +744,25 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
+ const transactions = await findElements(driver, By.css('.transaction-list-item'))
assert.equal(transactions.length, 1)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
assert.equal(txValues.length, 1)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- await driver.wait(until.elementTextMatches(txValues[0], /50\sTST/), 10000)
+ await driver.wait(until.elementTextMatches(txValues[0], /-50\sTST/), 10000)
}
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- const tx = await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed|Failed/), 10000)
- assert.equal(await tx.getText(), 'Confirmed')
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 1
+ }, 10000)
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ const tx = await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken|Failed/), 10000)
+ assert.equal(await tx.getText(), 'Sent Tokens')
})
})
@@ -792,9 +785,9 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(largeDelayMs)
- await findElements(driver, By.css('.tx-list-pending-item-container'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /7\sTST/), 10000)
+ await findElements(driver, By.css('.transaction-list__pending-transactions'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/), 10000)
await txListValue.click()
await delay(regularDelayMs)
@@ -841,25 +834,28 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const transactions = await findElements(driver, By.css('.tx-list-item'))
- assert.equal(transactions.length, 2)
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 2
+ }, 10000)
- const txValues = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues[0], /7\sTST/))
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/))
const walletBalance = await findElement(driver, By.css('.wallet-balance'))
await walletBalance.click()
const tokenListItems = await findElements(driver, By.css('.token-list-item'))
await tokenListItems[0].click()
+ await delay(regularDelayMs)
// test cancelled on firefox until https://github.com/mozilla/geckodriver/issues/906 is resolved,
// or possibly until we use latest version of firefox in the tests
if (process.env.SELENIUM_BROWSER !== 'firefox') {
- const tokenBalanceAmount = await findElement(driver, By.css('.token-balance__amount'))
- assert.equal(await tokenBalanceAmount.getText(), '43')
+ const tokenBalanceAmount = await findElement(driver, By.css('.transaction-view-balance__token-balance'))
+ assert.equal(await tokenBalanceAmount.getText(), '43 TST')
}
})
})
@@ -883,9 +879,14 @@ describe('MetaMask', function () {
await driver.switchTo().window(extension)
await delay(regularDelayMs)
- const [txListItem] = await findElements(driver, By.css('.tx-list-item'))
- const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txListValue, /0\sETH/))
+ driver.wait(async () => {
+ const pendingTxes = await findElements(driver, By.css('.transaction-list__pending-transactions .transaction-list-item'))
+ return pendingTxes.length === 1
+ }, 10000)
+
+ const [txListItem] = await findElements(driver, By.css('.transaction-list-item'))
+ const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txListValue, /-7\sTST/))
await txListItem.click()
await delay(regularDelayMs)
})
@@ -956,10 +957,15 @@ describe('MetaMask', function () {
})
it('finds the transaction in the transactions list', async function () {
- const txValues = await findElements(driver, By.css('.tx-list-value'))
- await driver.wait(until.elementTextMatches(txValues[0], /0\sETH/))
- const txStatuses = await findElements(driver, By.css('.tx-list-status'))
- await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
+ driver.wait(async () => {
+ const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+ return confirmedTxes.length === 3
+ }, 10000)
+
+ const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
+ await driver.wait(until.elementTextMatches(txValues[0], /-7\sTST/))
+ const txStatuses = await findElements(driver, By.css('.transaction-list-item__action'))
+ await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
})
})
@@ -1009,9 +1015,69 @@ describe('MetaMask', function () {
})
it('renders the balance for the chosen token', async () => {
- const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
+ const balance = await findElement(driver, By.css('.transaction-view-balance__token-balance'))
await driver.wait(until.elementTextMatches(balance, /0\sBAT/))
await delay(regularDelayMs)
})
})
+
+ describe('Stores custom RPC history', () => {
+ const customRpcUrls = [
+ 'https://mainnet.infura.io/1',
+ 'https://mainnet.infura.io/2',
+ 'https://mainnet.infura.io/3',
+ 'https://mainnet.infura.io/4',
+ ]
+
+ customRpcUrls.forEach(customRpcUrl => {
+ it('creates custom RPC: ' + customRpcUrl, async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ const customRpcButton = await findElement(driver, By.xpath(`//span[contains(text(), 'Custom RPC')]`))
+ await customRpcButton.click()
+ await delay(regularDelayMs)
+
+ const customRpcInput = await findElement(driver, By.css('input[placeholder="New RPC URL"]'))
+ await customRpcInput.clear()
+ await customRpcInput.sendKeys(customRpcUrl)
+
+ const customRpcSave = await findElement(driver, By.css('.settings-tab__rpc-save-button'))
+ await customRpcSave.click()
+ await delay(largeDelayMs * 2)
+ })
+ })
+
+ it('selects another provider', async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ const customRpcButton = await findElement(driver, By.xpath(`//span[contains(text(), 'Main Ethereum Network')]`))
+ await customRpcButton.click()
+ await delay(largeDelayMs * 2)
+ })
+
+ it('finds 3 recent RPCs in history', async () => {
+ const networkDropdown = await findElement(driver, By.css('.network-name'))
+ await networkDropdown.click()
+ await delay(regularDelayMs)
+
+ // oldest selected RPC is not found
+ await assertElementNotPresent(webdriver, driver, By.xpath(`//span[contains(text(), '${customRpcUrls[0]}')]`))
+
+ // only recent 3 are found and in correct order (most recent at the top)
+ const customRpcs = await findElements(driver, By.xpath(`//span[contains(text(), 'https://mainnet.infura.io/')]`))
+
+ assert.equal(customRpcs.length, 3)
+
+ for (let i = 0; i < customRpcs.length; i++) {
+ const linkText = await customRpcs[i].getText()
+ const rpcUrl = customRpcUrls[customRpcUrls.length - i - 1]
+
+ assert.notEqual(linkText.indexOf(rpcUrl), -1)
+ }
+ })
+ })
})
diff --git a/test/e2e/beta/run-all.sh b/test/e2e/beta/run-all.sh
index 7da61e504..cde46a2d3 100755
--- a/test/e2e/beta/run-all.sh
+++ b/test/e2e/beta/run-all.sh
@@ -6,5 +6,5 @@ set -o pipefail
export PATH="$PATH:./node_modules/.bin"
-shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && static-server test/e2e/beta/contract-test/ --port 8080' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec'
-shell-parallel -s 'npm run ganache:start -- -d' -x 'sleep 5 && static-server test/e2e/beta/contract-test/ --port 8080' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec'
+shell-parallel -s 'npm run ganache:start -- -b 2' -x 'sleep 5 && static-server test/e2e/beta/contract-test/ --port 8080' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec'
+shell-parallel -s 'npm run ganache:start -- -d -b 2' -x 'sleep 5 && static-server test/e2e/beta/contract-test/ --port 8080' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec'
diff --git a/test/e2e/func.js b/test/e2e/func.js
index 709357578..0d91da857 100644
--- a/test/e2e/func.js
+++ b/test/e2e/func.js
@@ -1,8 +1,10 @@
require('chromedriver')
require('geckodriver')
-const fs = require('fs')
+const fs = require('fs-extra')
const os = require('os')
const path = require('path')
+const pify = require('pify')
+const prependFile = pify(require('prepend-file'))
const webdriver = require('selenium-webdriver')
const Command = require('selenium-webdriver/lib/command').Command
@@ -10,6 +12,9 @@ const { By } = webdriver
module.exports = {
delay,
+ createModifiedTestBuild,
+ setupBrowserAndExtension,
+ verboseReportOnFailure,
buildChromeWebDriver,
buildFirefoxWebdriver,
installWebExt,
@@ -21,6 +26,37 @@ function delay (time) {
return new Promise(resolve => setTimeout(resolve, time))
}
+async function createModifiedTestBuild ({ browser, srcPath }) {
+ // copy build to test-builds directory
+ const extPath = path.resolve(`test-builds/${browser}`)
+ await fs.ensureDir(extPath)
+ await fs.copy(srcPath, extPath)
+ // inject METAMASK_TEST_CONFIG setting default test network
+ const config = { NetworkController: { provider: { type: 'localhost' } } }
+ await prependFile(`${extPath}/background.js`, `window.METAMASK_TEST_CONFIG=${JSON.stringify(config)};\n`)
+ return { extPath }
+}
+
+async function setupBrowserAndExtension ({ browser, extPath }) {
+ let driver, extensionId, extensionUri
+
+ if (browser === 'chrome') {
+ driver = buildChromeWebDriver(extPath)
+ extensionId = await getExtensionIdChrome(driver)
+ extensionUri = `chrome-extension://${extensionId}/home.html`
+ } else if (browser === 'firefox') {
+ driver = buildFirefoxWebdriver()
+ await installWebExt(driver, extPath)
+ await delay(700)
+ extensionId = await getExtensionIdFirefox(driver)
+ extensionUri = `moz-extension://${extensionId}/home.html`
+ } else {
+ throw new Error(`Unknown Browser "${browser}"`)
+ }
+
+ return { driver, extensionId, extensionUri }
+}
+
function buildChromeWebDriver (extPath) {
const tmpProfile = fs.mkdtempSync(path.join(os.tmpdir(), 'mm-chrome-profile'))
return new webdriver.Builder()
@@ -62,3 +98,13 @@ async function installWebExt (driver, extension) {
return await driver.execute(cmd, 'installWebExt(' + extension + ')')
}
+
+async function verboseReportOnFailure ({ browser, driver, title }) {
+ const artifactDir = `./test-artifacts/${browser}/${title}`
+ const filepathBase = `${artifactDir}/test-failure`
+ await fs.ensureDir(artifactDir)
+ const screenshot = await driver.takeScreenshot()
+ await fs.writeFile(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
+ const htmlSource = await driver.getPageSource()
+ await fs.writeFile(`${filepathBase}-dom.html`, htmlSource)
+}
diff --git a/test/helper.js b/test/helper.js
index a3abbebf2..51f28de17 100644
--- a/test/helper.js
+++ b/test/helper.js
@@ -1,10 +1,21 @@
+const Ganache = require('ganache-core')
+const nock = require('nock')
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-15'
+nock.disableNetConnect()
+nock.enableNetConnect('localhost')
+
Enzyme.configure({ adapter: new Adapter() })
// disallow promises from swallowing errors
enableFailureOnUnhandledPromiseRejection()
+// ganache server
+const server = Ganache.server()
+server.listen(8545, () => {
+ console.log('Ganache Testrpc is running on "http://localhost:8545"')
+})
+
// logging util
var log = require('loglevel')
log.setDefaultLevel(5)
@@ -14,6 +25,9 @@ global.log = log
// polyfills
//
+// fetch
+global.fetch = require('isomorphic-fetch')
+
// dom
require('jsdom-global')()
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index a9ccc97d2..540bf84c8 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -58,7 +58,7 @@ async function runSendFlowTest (assert, done) {
selectState.val('send new ui')
reactTriggerChange(selectState[0])
- const sendScreenButton = await queryAsync($, 'button.btn-primary.hero-balance-button')
+ const sendScreenButton = await queryAsync($, 'button.btn-primary.transaction-view-balance__button')
assert.ok(sendScreenButton[1], 'send screen button present')
sendScreenButton[1].click()
@@ -124,10 +124,10 @@ async function runSendFlowTest (assert, done) {
selectState.val('send edit')
reactTriggerChange(selectState[0])
- const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first()
+ const confirmFromName = (await queryAsync($, '.sender-to-recipient__name')).first()
assert.equal(confirmFromName[0].textContent, 'Send Account 4', 'confirm screen should show correct from name')
- const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last()
+ const confirmToName = (await queryAsync($, '.sender-to-recipient__name')).last()
assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
const confirmScreenRowFiats = await queryAsync($, '.confirm-detail-row__fiat')
diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
index c156b16ca..e53a52b67 100644
--- a/test/integration/lib/tx-list-items.js
+++ b/test/integration/lib/tx-list-items.js
@@ -29,26 +29,25 @@ async function runTxListItemsTest (assert, done) {
assert.ok(metamaskLogo[0], 'metamask logo present')
metamaskLogo[0].click()
- const txListItems = await queryAsync($, '.tx-list-item')
+ const txListItems = await queryAsync($, '.transaction-list-item')
assert.equal(txListItems.length, 8, 'all tx list items are rendered')
- const unapprovedTx = txListItems[0]
- assert.equal($(unapprovedTx).hasClass('tx-list-pending-item-container'), true, 'unapprovedTx has the correct class')
-
- const retryTx = txListItems[1]
- const retryTxLink = await findAsync($(retryTx), '.tx-list-item-retry-container span')
- assert.equal(retryTxLink[0].textContent, 'Taking too long? Increase the gas price on your transaction', 'retryTx has expected link')
+ const retryTxGrid = await findAsync($(txListItems[1]), '.transaction-list-item__grid')
+ retryTxGrid[0].click()
+ const retryTxDetails = await findAsync($(txListItems[1]), '.transaction-list-item-details')
+ const headerButtons = await findAsync($(retryTxDetails[0]), '.transaction-list-item-details__header-button')
+ assert.equal(headerButtons[0].textContent, 'speed up')
const approvedTx = txListItems[2]
- const approvedTxRenderedStatus = await findAsync($(approvedTx), '.tx-list-status')
- assert.equal(approvedTxRenderedStatus[0].textContent, 'Approved', 'approvedTx has correct label')
+ const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status')
+ assert.equal(approvedTxRenderedStatus[0].textContent, 'pending', 'approvedTx has correct label')
const unapprovedMsg = txListItems[3]
- const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.tx-list-account')
+ const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__action')
assert.equal(unapprovedMsgDescription[0].textContent, 'Signature Request', 'unapprovedMsg has correct description')
const failedTx = txListItems[4]
- const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
+ const failedTxRenderedStatus = await findAsync($(failedTx), '.transaction-list-item__status')
assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
const shapeShiftTx = txListItems[5]
@@ -56,10 +55,10 @@ async function runTxListItemsTest (assert, done) {
assert.equal(shapeShiftTxStatus[0].textContent, 'No deposits received', 'shapeShiftTx has correct status')
const confirmedTokenTx = txListItems[6]
- const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.tx-list-account')
- assert.equal(confirmedTokenTxAddress[0].textContent, '0xE7884118...81a9', 'confirmedTokenTx has correct address')
+ const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.transaction-list-item__status')
+ assert.equal(confirmedTokenTxAddress[0].textContent, 'Confirmed', 'confirmedTokenTx has correct address')
const rejectedTx = txListItems[7]
- const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.tx-list-status')
+ const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.transaction-list-item__status')
assert.equal(rejectedTxRenderedStatus[0].textContent, 'Rejected', 'rejectedTx has correct label')
}
diff --git a/test/lib/createTxMeta.js b/test/lib/createTxMeta.js
new file mode 100644
index 000000000..0e88e3cfb
--- /dev/null
+++ b/test/lib/createTxMeta.js
@@ -0,0 +1,16 @@
+const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper')
+
+module.exports = createTxMeta
+
+function createTxMeta (partialMeta) {
+ const txMeta = Object.assign({
+ status: 'unapproved',
+ txParams: {},
+ }, partialMeta)
+ // initialize history
+ txMeta.history = []
+ // capture initial snapshot of txMeta for history
+ const snapshot = txStateHistoryHelper.snapshotFromTxMeta(txMeta)
+ txMeta.history.push(snapshot)
+ return txMeta
+}
diff --git a/test/lib/mock-config-manager.js b/test/lib/mock-config-manager.js
deleted file mode 100644
index 0cc6953bb..000000000
--- a/test/lib/mock-config-manager.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const ObservableStore = require('obs-store')
-const clone = require('clone')
-const ConfigManager = require('../../app/scripts/lib/config-manager')
-const firstTimeState = require('../../app/scripts/first-time-state')
-
-module.exports = function () {
- const store = new ObservableStore(clone(firstTimeState))
- return new ConfigManager({ store })
-}
diff --git a/test/unit/app/controllers/currency-controller-test.js b/test/unit/app/controllers/currency-controller-test.js
index 1941d1c43..7c4644d9f 100644
--- a/test/unit/app/controllers/currency-controller-test.js
+++ b/test/unit/app/controllers/currency-controller-test.js
@@ -1,6 +1,3 @@
-// polyfill fetch
-global.fetch = global.fetch || require('isomorphic-fetch')
-
const assert = require('assert')
const nock = require('nock')
const CurrencyController = require('../../../../app/scripts/controllers/currency')
diff --git a/test/unit/app/controllers/detect-tokens-test.js b/test/unit/app/controllers/detect-tokens-test.js
index 2e3890ebb..e2140d801 100644
--- a/test/unit/app/controllers/detect-tokens-test.js
+++ b/test/unit/app/controllers/detect-tokens-test.js
@@ -1,4 +1,5 @@
const assert = require('assert')
+const nock = require('nock')
const sinon = require('sinon')
const ObservableStore = require('obs-store')
const DetectTokensController = require('../../../../app/scripts/controllers/detect-tokens')
@@ -6,15 +7,34 @@ const NetworkController = require('../../../../app/scripts/controllers/network/n
const PreferencesController = require('../../../../app/scripts/controllers/preferences')
describe('DetectTokensController', () => {
- const sandbox = sinon.createSandbox()
- let clock, keyringMemStore, network, preferences
- beforeEach(async () => {
- keyringMemStore = new ObservableStore({ isUnlocked: false})
- network = new NetworkController({ provider: { type: 'mainnet' }})
- preferences = new PreferencesController({ network })
- })
- after(() => {
- sandbox.restore()
+ const sandbox = sinon.createSandbox()
+ let clock, keyringMemStore, network, preferences, controller
+
+ const noop = () => {}
+
+ const networkControllerProviderConfig = {
+ getAccounts: noop,
+ }
+
+ beforeEach(async () => {
+
+
+ nock('https://api.infura.io')
+ .get(/.*/)
+ .reply(200)
+
+ keyringMemStore = new ObservableStore({ isUnlocked: false})
+ network = new NetworkController()
+ preferences = new PreferencesController({ network })
+ controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
+
+ network.initializeProvider(networkControllerProviderConfig)
+
+ })
+
+ after(() => {
+ sandbox.restore()
+ nock.cleanAll()
})
it('should poll on correct interval', async () => {
@@ -26,7 +46,10 @@ describe('DetectTokensController', () => {
it('should be called on every polling period', async () => {
clock = sandbox.useFakeTimers()
+ const network = new NetworkController()
+ network.initializeProvider(networkControllerProviderConfig)
network.setProviderType('mainnet')
+ const preferences = new PreferencesController({ network })
const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.isUnlocked = true
@@ -44,8 +67,6 @@ describe('DetectTokensController', () => {
})
it('should not check tokens while in test network', async () => {
- network.setProviderType('rinkeby')
- const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.isUnlocked = true
@@ -58,7 +79,6 @@ describe('DetectTokensController', () => {
})
it('should only check and add tokens while in main network', async () => {
- network.setProviderType('mainnet')
const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.isUnlocked = true
@@ -95,8 +115,6 @@ describe('DetectTokensController', () => {
// })
it('should trigger detect new tokens when change address', async () => {
- network.setProviderType('mainnet')
- const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.isUnlocked = true
var stub = sandbox.stub(controller, 'detectNewTokens')
@@ -105,8 +123,6 @@ describe('DetectTokensController', () => {
})
it('should trigger detect new tokens when submit password', async () => {
- network.setProviderType('mainnet')
- const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.selectedAddress = '0x0'
var stub = sandbox.stub(controller, 'detectNewTokens')
@@ -115,8 +131,6 @@ describe('DetectTokensController', () => {
})
it('should not trigger detect new tokens when not open or not unlocked', async () => {
- network.setProviderType('mainnet')
- const controller = new DetectTokensController({ preferences: preferences, network: network, keyringMemStore: keyringMemStore })
controller.isOpen = true
controller.isUnlocked = false
var stub = sandbox.stub(controller, 'detectTokenBalance')
diff --git a/test/unit/app/controllers/metamask-controller-test.js b/test/unit/app/controllers/metamask-controller-test.js
index 467066437..5273d2d4a 100644
--- a/test/unit/app/controllers/metamask-controller-test.js
+++ b/test/unit/app/controllers/metamask-controller-test.js
@@ -3,16 +3,22 @@ const sinon = require('sinon')
const clone = require('clone')
const nock = require('nock')
const createThoughStream = require('through2').obj
-const MetaMaskController = require('../../../../app/scripts/metamask-controller')
const blacklistJSON = require('eth-phishing-detect/src/config')
-const firstTimeState = require('../../../../app/scripts/first-time-state')
+const MetaMaskController = require('../../../../app/scripts/metamask-controller')
+const firstTimeState = require('../../../unit/localhostState')
+const createTxMeta = require('../../../lib/createTxMeta')
+const EthQuery = require('eth-query')
const currentNetworkId = 42
const DEFAULT_LABEL = 'Account 1'
+const DEFAULT_LABEL_2 = 'Account 2'
const TEST_SEED = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
const TEST_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'
+const TEST_ADDRESS_2 = '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b'
+const TEST_ADDRESS_3 = '0xeb9e64b93097bc15f01f13eae97015c57ab64823'
const TEST_SEED_ALT = 'setup olympic issue mobile velvet surge alcohol burger horse view reopen gentle'
const TEST_ADDRESS_ALT = '0xc42edfcc21ed14dda456aa0756c153f7985d8813'
+const CUSTOM_RPC_URL = 'http://localhost:8545'
describe('MetaMaskController', function () {
let metamaskController
@@ -134,6 +140,9 @@ describe('MetaMaskController', function () {
describe('#createNewVaultAndRestore', function () {
it('should be able to call newVaultAndRestore despite a mistake.', async function () {
const password = 'what-what-what'
+ sandbox.stub(metamaskController, 'getBalance')
+ metamaskController.getBalance.callsFake(() => { return Promise.resolve('0x0') })
+
await metamaskController.createNewVaultAndRestore(password, TEST_SEED.slice(0, -1)).catch((e) => null)
await metamaskController.createNewVaultAndRestore(password, TEST_SEED)
@@ -141,6 +150,9 @@ describe('MetaMaskController', function () {
})
it('should clear previous identities after vault restoration', async () => {
+ sandbox.stub(metamaskController, 'getBalance')
+ metamaskController.getBalance.callsFake(() => { return Promise.resolve('0x0') })
+
await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED)
assert.deepEqual(metamaskController.getState().identities, {
[TEST_ADDRESS]: { address: TEST_ADDRESS, name: DEFAULT_LABEL },
@@ -156,6 +168,54 @@ describe('MetaMaskController', function () {
[TEST_ADDRESS_ALT]: { address: TEST_ADDRESS_ALT, name: DEFAULT_LABEL },
})
})
+
+ it('should restore any consecutive accounts with balances', async () => {
+ sandbox.stub(metamaskController, 'getBalance')
+ metamaskController.getBalance.withArgs(TEST_ADDRESS).callsFake(() => {
+ return Promise.resolve('0x14ced5122ce0a000')
+ })
+ metamaskController.getBalance.withArgs(TEST_ADDRESS_2).callsFake(() => {
+ return Promise.resolve('0x0')
+ })
+ metamaskController.getBalance.withArgs(TEST_ADDRESS_3).callsFake(() => {
+ return Promise.resolve('0x14ced5122ce0a000')
+ })
+
+ await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED)
+ assert.deepEqual(metamaskController.getState().identities, {
+ [TEST_ADDRESS]: { address: TEST_ADDRESS, name: DEFAULT_LABEL },
+ [TEST_ADDRESS_2]: { address: TEST_ADDRESS_2, name: DEFAULT_LABEL_2 },
+ })
+ })
+ })
+
+ describe('#getBalance', () => {
+ it('should return the balance known by accountTracker', async () => {
+ const accounts = {}
+ const balance = '0x14ced5122ce0a000'
+ accounts[TEST_ADDRESS] = { balance: balance }
+
+ metamaskController.accountTracker.store.putState({ accounts: accounts })
+
+ const gotten = await metamaskController.getBalance(TEST_ADDRESS)
+
+ assert.equal(balance, gotten)
+ })
+
+ it('should ask the network for a balance when not known by accountTracker', async () => {
+ const accounts = {}
+ const balance = '0x14ced5122ce0a000'
+ const ethQuery = new EthQuery()
+ sinon.stub(ethQuery, 'getBalance').callsFake((account, callback) => {
+ callback(undefined, balance)
+ })
+
+ metamaskController.accountTracker.store.putState({ accounts: accounts })
+
+ const gotten = await metamaskController.getBalance(TEST_ADDRESS, ethQuery)
+
+ assert.equal(balance, gotten)
+ })
})
describe('#getApi', function () {
@@ -360,29 +420,19 @@ describe('MetaMaskController', function () {
})
describe('#setCustomRpc', function () {
- const customRPC = 'https://custom.rpc/'
let rpcTarget
beforeEach(function () {
-
- nock('https://custom.rpc')
- .post('/')
- .reply(200)
-
- rpcTarget = metamaskController.setCustomRpc(customRPC)
- })
-
- afterEach(function () {
- nock.cleanAll()
+ rpcTarget = metamaskController.setCustomRpc(CUSTOM_RPC_URL)
})
it('returns custom RPC that when called', async function () {
- assert.equal(await rpcTarget, customRPC)
+ assert.equal(await rpcTarget, CUSTOM_RPC_URL)
})
it('changes the network controller rpc', function () {
const networkControllerState = metamaskController.networkController.store.getState()
- assert.equal(networkControllerState.provider.rpcTarget, customRPC)
+ assert.equal(networkControllerState.provider.rpcTarget, CUSTOM_RPC_URL)
})
})
@@ -487,9 +537,10 @@ describe('MetaMaskController', function () {
getNetworkstub.returns(42)
metamaskController.txController.txStateManager._saveTxList([
- { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'} },
- { id: 2, status: 'rejected', metamaskNetworkId: 32, txParams: {} },
- { id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {from: '0xB09d8505E1F4EF1CeA089D47094f5DD3464083d4'} },
+ createTxMeta({ id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'} }),
+ createTxMeta({ id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'} }),
+ createTxMeta({ id: 2, status: 'rejected', metamaskNetworkId: 32 }),
+ createTxMeta({ id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {from: '0xB09d8505E1F4EF1CeA089D47094f5DD3464083d4'} }),
])
})
@@ -522,7 +573,7 @@ describe('MetaMaskController', function () {
assert(metamaskController.preferencesController.removeAddress.calledWith(addressToRemove))
})
it('should call accountTracker.removeAccount', async function () {
- assert(metamaskController.accountTracker.removeAccount.calledWith(addressToRemove))
+ assert(metamaskController.accountTracker.removeAccount.calledWith([addressToRemove]))
})
it('should call keyringController.removeAccount', async function () {
assert(metamaskController.keyringController.removeAccount.calledWith(addressToRemove))
@@ -533,22 +584,18 @@ describe('MetaMaskController', function () {
})
describe('#clearSeedWordCache', function () {
+ it('should set seed words to null', function (done) {
+ sandbox.stub(metamaskController.preferencesController, 'setSeedWords')
+ metamaskController.clearSeedWordCache((err) => {
+ if (err) {
+ done(err)
+ }
- it('should have set seed words', function () {
- metamaskController.configManager.setSeedWords('test words')
- const getConfigSeed = metamaskController.configManager.getSeedWords()
- assert.equal(getConfigSeed, 'test words')
- })
-
- it('should clear config seed phrase', function () {
- metamaskController.configManager.setSeedWords('test words')
- metamaskController.clearSeedWordCache((err, result) => {
- if (err) console.log(err)
+ assert.ok(metamaskController.preferencesController.setSeedWords.calledOnce)
+ assert.deepEqual(metamaskController.preferencesController.setSeedWords.args, [[null]])
+ done()
})
- const getConfigSeed = metamaskController.configManager.getSeedWords()
- assert.equal(getConfigSeed, null)
})
-
})
describe('#setCurrentLocale', function () {
@@ -566,14 +613,16 @@ describe('MetaMaskController', function () {
})
- describe('#newUnsignedMessage', function () {
+ describe('#newUnsignedMessage', () => {
let msgParams, metamaskMsgs, messages, msgId
const address = '0xc42edfcc21ed14dda456aa0756c153f7985d8813'
const data = '0x43727970746f6b697474696573'
- beforeEach(async function () {
+ beforeEach(async () => {
+ sandbox.stub(metamaskController, 'getBalance')
+ metamaskController.getBalance.callsFake(() => { return Promise.resolve('0x0') })
await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED_ALT)
@@ -582,7 +631,10 @@ describe('MetaMaskController', function () {
'data': data,
}
- metamaskController.newUnsignedMessage(msgParams, noop)
+ const promise = metamaskController.newUnsignedMessage(msgParams)
+ // handle the promise so it doesn't throw an unhandledRejection
+ promise.then(noop).catch(noop)
+
metamaskMsgs = metamaskController.messageManager.getUnapprovedMsgs()
messages = metamaskController.messageManager.messages
msgId = Object.keys(metamaskMsgs)[0]
@@ -622,13 +674,17 @@ describe('MetaMaskController', function () {
describe('#newUnsignedPersonalMessage', function () {
- it('errors with no from in msgParams', function () {
+ it('errors with no from in msgParams', async () => {
const msgParams = {
'data': data,
}
- metamaskController.newUnsignedPersonalMessage(msgParams, function (error) {
+
+ try {
+ await metamaskController.newUnsignedPersonalMessage(msgParams)
+ assert.fail('should have thrown')
+ } catch (error) {
assert.equal(error.message, 'Nifty Wallet Message Signature: from field is required.')
- })
+ }
})
let msgParams, metamaskPersonalMsgs, personalMessages, msgId
@@ -637,6 +693,8 @@ describe('MetaMaskController', function () {
const data = '0x43727970746f6b697474696573'
beforeEach(async function () {
+ sandbox.stub(metamaskController, 'getBalance')
+ metamaskController.getBalance.callsFake(() => { return Promise.resolve('0x0') })
await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED_ALT)
@@ -645,7 +703,10 @@ describe('MetaMaskController', function () {
'data': data,
}
- metamaskController.newUnsignedPersonalMessage(msgParams, noop)
+ const promise = metamaskController.newUnsignedPersonalMessage(msgParams)
+ // handle the promise so it doesn't throw an unhandledRejection
+ promise.then(noop).catch(noop)
+
metamaskPersonalMsgs = metamaskController.personalMessageManager.getUnapprovedMsgs()
personalMessages = metamaskController.personalMessageManager.messages
msgId = Object.keys(metamaskPersonalMsgs)[0]
@@ -684,22 +745,27 @@ describe('MetaMaskController', function () {
describe('#setupUntrustedCommunication', function () {
let streamTest
- const phishingUrl = 'decentral.market'
+ const phishingUrl = 'myethereumwalletntw.com'
afterEach(function () {
streamTest.end()
})
- it('sets up phishing stream for untrusted communication ', async function () {
+ it('sets up phishing stream for untrusted communication ', async () => {
await metamaskController.blacklistController.updatePhishingList()
+ console.log(blacklistJSON.blacklist.includes(phishingUrl))
+
+ const { promise, resolve } = deferredPromise()
streamTest = createThoughStream((chunk, enc, cb) => {
- assert.equal(chunk.name, 'phishing')
+ if (chunk.name !== 'phishing') return cb()
assert.equal(chunk.data.hostname, phishingUrl)
- cb()
- })
- // console.log(streamTest)
- metamaskController.setupUntrustedCommunication(streamTest, phishingUrl)
+ resolve()
+ cb()
+ })
+ metamaskController.setupUntrustedCommunication(streamTest, phishingUrl)
+
+ await promise
})
})
@@ -724,25 +790,102 @@ describe('MetaMaskController', function () {
describe('#markAccountsFound', function () {
it('adds lost accounts to config manager data', function () {
metamaskController.markAccountsFound(noop)
- const configManagerData = metamaskController.configManager.getData()
- assert.deepEqual(configManagerData.lostAccounts, [])
+ const state = metamaskController.getState()
+ assert.deepEqual(state.lostAccounts, [])
})
})
describe('#markPasswordForgotten', function () {
it('adds and sets forgottenPassword to config data to true', function () {
metamaskController.markPasswordForgotten(noop)
- const configManagerData = metamaskController.configManager.getData()
- assert.equal(configManagerData.forgottenPassword, true)
+ const state = metamaskController.getState()
+ assert.equal(state.forgottenPassword, true)
})
})
describe('#unMarkPasswordForgotten', function () {
it('adds and sets forgottenPassword to config data to false', function () {
metamaskController.unMarkPasswordForgotten(noop)
- const configManagerData = metamaskController.configManager.getData()
- assert.equal(configManagerData.forgottenPassword, false)
+ const state = metamaskController.getState()
+ assert.equal(state.forgottenPassword, false)
+ })
+ })
+
+ describe('#_onKeyringControllerUpdate', function () {
+ it('should do nothing if there are no keyrings in state', async function () {
+ const addAddresses = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({keyrings: []})
+
+ assert.ok(addAddresses.notCalled)
+ assert.ok(syncWithAddresses.notCalled)
+ assert.deepEqual(metamaskController.getState(), oldState)
+ })
+
+ it('should update selected address if keyrings was locked', async function () {
+ const addAddresses = sinon.fake()
+ const getSelectedAddress = sinon.fake.returns('0x42')
+ const setSelectedAddress = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ getSelectedAddress,
+ setSelectedAddress,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({
+ isUnlocked: false,
+ keyrings: [{
+ accounts: ['0x1', '0x2'],
+ }],
+ })
+
+ assert.deepEqual(addAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(syncWithAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(setSelectedAddress.args, [['0x1']])
+ assert.deepEqual(metamaskController.getState(), oldState)
+ })
+
+ it('should NOT update selected address if already unlocked', async function () {
+ const addAddresses = sinon.fake()
+ const syncWithAddresses = sinon.fake()
+ sandbox.replace(metamaskController, 'preferencesController', {
+ addAddresses,
+ })
+ sandbox.replace(metamaskController, 'accountTracker', {
+ syncWithAddresses,
+ })
+
+ const oldState = metamaskController.getState()
+ await metamaskController._onKeyringControllerUpdate({
+ isUnlocked: true,
+ keyrings: [{
+ accounts: ['0x1', '0x2'],
+ }],
+ })
+
+ assert.deepEqual(addAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(syncWithAddresses.args, [[['0x1', '0x2']]])
+ assert.deepEqual(metamaskController.getState(), oldState)
})
})
})
+
+function deferredPromise () {
+ let resolve
+ const promise = new Promise(_resolve => { resolve = _resolve })
+ return { promise, resolve }
+}
diff --git a/test/unit/app/controllers/network-contoller-test.js b/test/unit/app/controllers/network-contoller-test.js
index 8a3d555f2..746b0d07a 100644
--- a/test/unit/app/controllers/network-contoller-test.js
+++ b/test/unit/app/controllers/network-contoller-test.js
@@ -32,9 +32,10 @@ describe('# Network Controller', function () {
describe('#provider', function () {
it('provider should be updatable without reassignment', function () {
networkController.initializeProvider(networkControllerProviderConfig)
- const proxy = networkController._proxy
- proxy.setTarget({ test: true, on: () => {} })
- assert.ok(proxy.test)
+ const providerProxy = networkController.getProviderAndBlockTracker().provider
+ assert.equal(providerProxy.test, undefined)
+ providerProxy.setTarget({ test: true })
+ assert.equal(providerProxy.test, true)
})
})
describe('#getNetworkState', function () {
diff --git a/test/unit/app/controllers/notice-controller-test.js b/test/unit/app/controllers/notice-controller-test.js
index b3ae75080..834c88f7b 100644
--- a/test/unit/app/controllers/notice-controller-test.js
+++ b/test/unit/app/controllers/notice-controller-test.js
@@ -1,16 +1,11 @@
const assert = require('assert')
-const configManagerGen = require('../../../lib/mock-config-manager')
const NoticeController = require('../../../../app/scripts/notice-controller')
describe('notice-controller', function () {
var noticeController
beforeEach(function () {
- // simple localStorage polyfill
- const configManager = configManagerGen()
- noticeController = new NoticeController({
- configManager: configManager,
- })
+ noticeController = new NoticeController()
})
describe('notices', function () {
diff --git a/test/unit/app/controllers/preferences-controller-test.js b/test/unit/app/controllers/preferences-controller-test.js
index 1d83d8452..f6fd2faeb 100644
--- a/test/unit/app/controllers/preferences-controller-test.js
+++ b/test/unit/app/controllers/preferences-controller-test.js
@@ -1,6 +1,7 @@
const assert = require('assert')
const ObservableStore = require('obs-store')
const PreferencesController = require('../../../../app/scripts/controllers/preferences')
+const sinon = require('sinon')
describe('preferences controller', function () {
let preferencesController
@@ -368,5 +369,144 @@ describe('preferences controller', function () {
assert.deepEqual(tokensSecond, initialTokensSecond, 'tokens equal for same network')
})
})
+
+ describe('on watchAsset', function () {
+ var stubNext, stubEnd, stubHandleWatchAssetERC20, asy, req, res
+ const sandbox = sinon.createSandbox()
+
+ beforeEach(() => {
+ req = {params: {}}
+ res = {}
+ asy = {next: () => {}, end: () => {}}
+ stubNext = sandbox.stub(asy, 'next')
+ stubEnd = sandbox.stub(asy, 'end').returns(0)
+ stubHandleWatchAssetERC20 = sandbox.stub(preferencesController, '_handleWatchAssetERC20')
+ })
+ after(() => {
+ sandbox.restore()
+ })
+
+ it('shouldn not do anything if method not corresponds', async function () {
+ const asy = {next: () => {}, end: () => {}}
+ var stubNext = sandbox.stub(asy, 'next')
+ var stubEnd = sandbox.stub(asy, 'end').returns(0)
+ req.method = 'metamask'
+ await preferencesController.requestWatchAsset(req, res, asy.next, asy.end)
+ sandbox.assert.notCalled(stubEnd)
+ sandbox.assert.called(stubNext)
+ })
+ it('should do something if method is supported', async function () {
+ const asy = {next: () => {}, end: () => {}}
+ var stubNext = sandbox.stub(asy, 'next')
+ var stubEnd = sandbox.stub(asy, 'end').returns(0)
+ req.method = 'metamask_watchAsset'
+ req.params.type = 'someasset'
+ await preferencesController.requestWatchAsset(req, res, asy.next, asy.end)
+ sandbox.assert.called(stubEnd)
+ sandbox.assert.notCalled(stubNext)
+ })
+ it('should through error if method is supported but asset type is not', async function () {
+ req.method = 'metamask_watchAsset'
+ req.params.type = 'someasset'
+ await preferencesController.requestWatchAsset(req, res, asy.next, asy.end)
+ sandbox.assert.called(stubEnd)
+ sandbox.assert.notCalled(stubHandleWatchAssetERC20)
+ sandbox.assert.notCalled(stubNext)
+ assert.deepEqual(res, {})
+ })
+ it('should trigger handle add asset if type supported', async function () {
+ const asy = {next: () => {}, end: () => {}}
+ req.method = 'metamask_watchAsset'
+ req.params.type = 'ERC20'
+ await preferencesController.requestWatchAsset(req, res, asy.next, asy.end)
+ sandbox.assert.called(stubHandleWatchAssetERC20)
+ })
+ })
+
+ describe('on watchAsset of type ERC20', function () {
+ var req
+
+ const sandbox = sinon.createSandbox()
+ beforeEach(() => {
+ req = {params: {type: 'ERC20'}}
+ })
+ after(() => {
+ sandbox.restore()
+ })
+
+ it('should add suggested token', async function () {
+ const address = '0xabcdef1234567'
+ const symbol = 'ABBR'
+ const decimals = 5
+ const image = 'someimage'
+ req.params.options = { address, symbol, decimals, image }
+
+ sandbox.stub(preferencesController, '_validateERC20AssetParams').returns(true)
+ preferencesController.showWatchAssetUi = async () => {}
+
+ await preferencesController._handleWatchAssetERC20(req.params.options)
+ const suggested = preferencesController.getSuggestedTokens()
+ assert.equal(Object.keys(suggested).length, 1, `one token added ${Object.keys(suggested)}`)
+
+ assert.equal(suggested[address].address, address, 'set address correctly')
+ assert.equal(suggested[address].symbol, symbol, 'set symbol correctly')
+ assert.equal(suggested[address].decimals, decimals, 'set decimals correctly')
+ assert.equal(suggested[address].image, image, 'set image correctly')
+ })
+
+ it('should add token correctly if user confirms', async function () {
+ const address = '0xabcdef1234567'
+ const symbol = 'ABBR'
+ const decimals = 5
+ const image = 'someimage'
+ req.params.options = { address, symbol, decimals, image }
+
+ sandbox.stub(preferencesController, '_validateERC20AssetParams').returns(true)
+ preferencesController.showWatchAssetUi = async () => {
+ await preferencesController.addToken(address, symbol, decimals, image)
+ }
+
+ await preferencesController._handleWatchAssetERC20(req.params.options)
+ const tokens = preferencesController.getTokens()
+ assert.equal(tokens.length, 1, `one token added`)
+ const added = tokens[0]
+ assert.equal(added.address, address, 'set address correctly')
+ assert.equal(added.symbol, symbol, 'set symbol correctly')
+ assert.equal(added.decimals, decimals, 'set decimals correctly')
+
+ const assetImages = preferencesController.getAssetImages()
+ assert.ok(assetImages[address], `set image correctly`)
+ })
+ })
+
+ describe('setPasswordForgotten', function () {
+ it('should default to false', function () {
+ const state = preferencesController.store.getState()
+ assert.equal(state.forgottenPassword, false)
+ })
+
+ it('should set the forgottenPassword property in state', function () {
+ assert.equal(preferencesController.store.getState().forgottenPassword, false)
+
+ preferencesController.setPasswordForgotten(true)
+
+ assert.equal(preferencesController.store.getState().forgottenPassword, true)
+ })
+ })
+
+ describe('setSeedWords', function () {
+ it('should default to null', function () {
+ const state = preferencesController.store.getState()
+ assert.equal(state.seedWords, null)
+ })
+
+ it('should set the seedWords property in state', function () {
+ assert.equal(preferencesController.store.getState().seedWords, null)
+
+ preferencesController.setSeedWords('foo bar baz')
+
+ assert.equal(preferencesController.store.getState().seedWords, 'foo bar baz')
+ })
+ })
})
diff --git a/test/unit/app/controllers/transactions/nonce-tracker-test.js b/test/unit/app/controllers/transactions/nonce-tracker-test.js
index 6c0ac759f..51ac390e9 100644
--- a/test/unit/app/controllers/transactions/nonce-tracker-test.js
+++ b/test/unit/app/controllers/transactions/nonce-tracker-test.js
@@ -224,14 +224,15 @@ function generateNonceTrackerWith (pending, confirmed, providerStub = '0x0') {
providerResultStub.result = providerStub
const provider = {
sendAsync: (_, cb) => { cb(undefined, providerResultStub) },
- _blockTracker: {
- getCurrentBlock: () => '0x11b568',
- },
+ }
+ const blockTracker = {
+ getCurrentBlock: () => '0x11b568',
+ getLatestBlock: async () => '0x11b568',
}
return new NonceTracker({
provider,
+ blockTracker,
getPendingTransactions,
getConfirmedTransactions,
})
}
-
diff --git a/test/unit/app/controllers/transactions/pending-tx-test.js b/test/unit/app/controllers/transactions/pending-tx-test.js
index 8bf2da6f8..ba15f1953 100644
--- a/test/unit/app/controllers/transactions/pending-tx-test.js
+++ b/test/unit/app/controllers/transactions/pending-tx-test.js
@@ -9,6 +9,7 @@ describe('PendingTransactionTracker', function () {
let pendingTxTracker, txMeta, txMetaNoHash, providerResultStub,
provider, txMeta3, txList, knownErrors
this.timeout(10000)
+
beforeEach(function () {
txMeta = {
id: 1,
@@ -40,7 +41,10 @@ describe('PendingTransactionTracker', function () {
getPendingTransactions: () => { return [] },
getCompletedTransactions: () => { return [] },
publishTransaction: () => {},
+ confirmTransaction: () => {},
})
+
+ pendingTxTracker._getBlock = (blockNumber) => { return {number: blockNumber, transactions: []} }
})
describe('_checkPendingTx state management', function () {
@@ -92,58 +96,6 @@ describe('PendingTransactionTracker', function () {
})
})
- describe('#checkForTxInBlock', function () {
- it('should return if no pending transactions', function () {
- // throw a type error if it trys to do anything on the block
- // thus failing the test
- const block = Proxy.revocable({}, {}).revoke()
- pendingTxTracker.checkForTxInBlock(block)
- })
- it('should emit \'tx:failed\' if the txMeta does not have a hash', function (done) {
- const block = Proxy.revocable({}, {}).revoke()
- pendingTxTracker.getPendingTransactions = () => [txMetaNoHash]
- pendingTxTracker.once('tx:failed', (txId, err) => {
- assert(txId, txMetaNoHash.id, 'should pass txId')
- done()
- })
- pendingTxTracker.checkForTxInBlock(block)
- })
- it('should emit \'txConfirmed\' if the tx is in the block', function (done) {
- const block = { transactions: [txMeta]}
- pendingTxTracker.getPendingTransactions = () => [txMeta]
- pendingTxTracker.once('tx:confirmed', (txId) => {
- assert(txId, txMeta.id, 'should pass txId')
- done()
- })
- pendingTxTracker.once('tx:failed', (_, err) => { done(err) })
- pendingTxTracker.checkForTxInBlock(block)
- })
- })
- describe('#queryPendingTxs', function () {
- it('should call #_checkPendingTxs if their is no oldBlock', function (done) {
- let oldBlock
- const newBlock = { number: '0x01' }
- pendingTxTracker._checkPendingTxs = done
- pendingTxTracker.queryPendingTxs({ oldBlock, newBlock })
- })
- it('should call #_checkPendingTxs if oldBlock and the newBlock have a diff of greater then 1', function (done) {
- const oldBlock = { number: '0x01' }
- const newBlock = { number: '0x03' }
- pendingTxTracker._checkPendingTxs = done
- pendingTxTracker.queryPendingTxs({ oldBlock, newBlock })
- })
- it('should not call #_checkPendingTxs if oldBlock and the newBlock have a diff of 1 or less', function (done) {
- const oldBlock = { number: '0x1' }
- const newBlock = { number: '0x2' }
- pendingTxTracker._checkPendingTxs = () => {
- const err = new Error('should not call #_checkPendingTxs if oldBlock and the newBlock have a diff of 1 or less')
- done(err)
- }
- pendingTxTracker.queryPendingTxs({ oldBlock, newBlock })
- done()
- })
- })
-
describe('#_checkPendingTx', function () {
it('should emit \'tx:failed\' if the txMeta does not have a hash', function (done) {
pendingTxTracker.once('tx:failed', (txId, err) => {
@@ -157,16 +109,6 @@ describe('PendingTransactionTracker', function () {
providerResultStub.eth_getTransactionByHash = null
pendingTxTracker._checkPendingTx(txMeta)
})
-
- it('should emit \'txConfirmed\'', function (done) {
- providerResultStub.eth_getTransactionByHash = {blockNumber: '0x01'}
- pendingTxTracker.once('tx:confirmed', (txId) => {
- assert(txId, txMeta.id, 'should pass txId')
- done()
- })
- pendingTxTracker.once('tx:failed', (_, err) => { done(err) })
- pendingTxTracker._checkPendingTx(txMeta)
- })
})
describe('#_checkPendingTxs', function () {
@@ -180,19 +122,19 @@ describe('PendingTransactionTracker', function () {
})
})
- it('should warp all txMeta\'s in #_checkPendingTx', function (done) {
+ it('should warp all txMeta\'s in #updatePendingTxs', function (done) {
pendingTxTracker.getPendingTransactions = () => txList
pendingTxTracker._checkPendingTx = (tx) => { tx.resolve(tx) }
Promise.all(txList.map((tx) => tx.processed))
.then((txCompletedList) => done())
.catch(done)
- pendingTxTracker._checkPendingTxs()
+ pendingTxTracker.updatePendingTxs()
})
})
describe('#resubmitPendingTxs', function () {
- const blockStub = { number: '0x0' }
+ const blockNumberStub = '0x0'
beforeEach(function () {
const txMeta2 = txMeta3 = txMeta
txList = [txMeta, txMeta2, txMeta3].map((tx) => {
@@ -210,7 +152,7 @@ describe('PendingTransactionTracker', function () {
Promise.all(txList.map((tx) => tx.processed))
.then((txCompletedList) => done())
.catch(done)
- pendingTxTracker.resubmitPendingTxs(blockStub)
+ pendingTxTracker.resubmitPendingTxs(blockNumberStub)
})
it('should not emit \'tx:failed\' if the txMeta throws a known txError', function (done) {
knownErrors = [
@@ -237,7 +179,7 @@ describe('PendingTransactionTracker', function () {
.then((txCompletedList) => done())
.catch(done)
- pendingTxTracker.resubmitPendingTxs(blockStub)
+ pendingTxTracker.resubmitPendingTxs(blockNumberStub)
})
it('should emit \'tx:warning\' if it encountered a real error', function (done) {
pendingTxTracker.once('tx:warning', (txMeta, err) => {
@@ -255,7 +197,7 @@ describe('PendingTransactionTracker', function () {
.then((txCompletedList) => done())
.catch(done)
- pendingTxTracker.resubmitPendingTxs(blockStub)
+ pendingTxTracker.resubmitPendingTxs(blockNumberStub)
})
})
describe('#_resubmitTx', function () {
diff --git a/test/unit/app/controllers/transactions/tx-controller-test.js b/test/unit/app/controllers/transactions/tx-controller-test.js
index 3e94e2562..45260aa83 100644
--- a/test/unit/app/controllers/transactions/tx-controller-test.js
+++ b/test/unit/app/controllers/transactions/tx-controller-test.js
@@ -1,4 +1,5 @@
const assert = require('assert')
+const EventEmitter = require('events')
const ethUtil = require('ethereumjs-util')
const EthTx = require('ethereumjs-tx')
const ObservableStore = require('obs-store')
@@ -22,12 +23,14 @@ describe('Transaction Controller', function () {
}
provider = createTestProviderTools({ scaffold: providerResultStub }).provider
fromAccount = getTestAccounts()[0]
-
+ const blockTrackerStub = new EventEmitter()
+ blockTrackerStub.getCurrentBlock = noop
+ blockTrackerStub.getLatestBlock = noop
txController = new TransactionController({
provider,
networkStore: new ObservableStore(currentNetworkId),
txHistoryLimit: 10,
- blockTracker: { getCurrentBlock: noop, on: noop, once: noop },
+ blockTracker: blockTrackerStub,
signTransaction: (ethTx) => new Promise((resolve) => {
ethTx.sign(fromAccount.key)
resolve()
@@ -49,9 +52,9 @@ describe('Transaction Controller', function () {
describe('#getUnapprovedTxCount', function () {
it('should return the number of unapproved txs', function () {
txController.txStateManager._saveTxList([
- { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} },
- { id: 2, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} },
- { id: 3, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {} },
+ { id: 1, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
+ { id: 2, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
+ { id: 3, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
])
const unapprovedTxCount = txController.getUnapprovedTxCount()
assert.equal(unapprovedTxCount, 3, 'should be 3')
@@ -61,9 +64,9 @@ describe('Transaction Controller', function () {
describe('#getPendingTxCount', function () {
it('should return the number of pending txs', function () {
txController.txStateManager._saveTxList([
- { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {} },
- { id: 2, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {} },
- { id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {} },
+ { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
+ { id: 2, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
+ { id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {}, history: [] },
])
const pendingTxCount = txController.getPendingTxCount()
assert.equal(pendingTxCount, 3, 'should be 3')
@@ -79,15 +82,15 @@ describe('Transaction Controller', function () {
'to': '0xc684832530fcbddae4b4230a47e991ddcec2831d',
}
txController.txStateManager._saveTxList([
- {id: 0, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams},
- {id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams},
- {id: 2, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams},
- {id: 3, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams},
- {id: 4, status: 'rejected', metamaskNetworkId: currentNetworkId, txParams},
- {id: 5, status: 'approved', metamaskNetworkId: currentNetworkId, txParams},
- {id: 6, status: 'signed', metamaskNetworkId: currentNetworkId, txParams},
- {id: 7, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams},
- {id: 8, status: 'failed', metamaskNetworkId: currentNetworkId, txParams},
+ {id: 0, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 1, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 2, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 3, status: 'unapproved', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 4, status: 'rejected', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 5, status: 'approved', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 6, status: 'signed', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 7, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams, history: [] },
+ {id: 8, status: 'failed', metamaskNetworkId: currentNetworkId, txParams, history: [] },
])
})
@@ -201,24 +204,22 @@ describe('Transaction Controller', function () {
})
describe('#addTxGasDefaults', function () {
- it('should add the tx defaults if their are none', function (done) {
+ it('should add the tx defaults if their are none', async () => {
const txMeta = {
- 'txParams': {
- 'from': '0xc684832530fcbddae4b4230a47e991ddcec2831d',
- 'to': '0xc684832530fcbddae4b4230a47e991ddcec2831d',
+ txParams: {
+ from: '0xc684832530fcbddae4b4230a47e991ddcec2831d',
+ to: '0xc684832530fcbddae4b4230a47e991ddcec2831d',
},
+ history: [],
}
- providerResultStub.eth_gasPrice = '4a817c800'
- providerResultStub.eth_getBlockByNumber = { gasLimit: '47b784' }
- providerResultStub.eth_estimateGas = '5209'
- txController.addTxGasDefaults(txMeta)
- .then((txMetaWithDefaults) => {
- assert(txMetaWithDefaults.txParams.value, '0x0', 'should have added 0x0 as the value')
- assert(txMetaWithDefaults.txParams.gasPrice, 'should have added the gas price')
- assert(txMetaWithDefaults.txParams.gas, 'should have added the gas field')
- done()
- })
- .catch(done)
+ providerResultStub.eth_gasPrice = '4a817c800'
+ providerResultStub.eth_getBlockByNumber = { gasLimit: '47b784' }
+ providerResultStub.eth_estimateGas = '5209'
+
+ const txMetaWithDefaults = await txController.addTxGasDefaults(txMeta)
+ assert(txMetaWithDefaults.txParams.value, '0x0', 'should have added 0x0 as the value')
+ assert(txMetaWithDefaults.txParams.gasPrice, 'should have added the gas price')
+ assert(txMetaWithDefaults.txParams.gas, 'should have added the gas field')
})
})
@@ -381,8 +382,9 @@ describe('Transaction Controller', function () {
})
it('should publish a tx, updates the rawTx when provided a one', async function () {
+ const rawTx = '0x477b2e6553c917af0db0388ae3da62965ff1a184558f61b749d1266b2e6d024c'
txController.txStateManager.addTx(txMeta)
- await txController.publishTransaction(txMeta.id)
+ await txController.publishTransaction(txMeta.id, rawTx)
const publishedTx = txController.txStateManager.getTx(1)
assert.equal(publishedTx.hash, hash)
assert.equal(publishedTx.status, 'submitted')
@@ -398,7 +400,7 @@ describe('Transaction Controller', function () {
data: '0x0',
}
txController.txStateManager._saveTxList([
- { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams },
+ { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams, history: [] },
])
txController.retryTransaction(1)
.then((txMeta) => {
diff --git a/test/unit/config-manager-test.js b/test/unit/config-manager-test.js
deleted file mode 100644
index 2dbaad01a..000000000
--- a/test/unit/config-manager-test.js
+++ /dev/null
@@ -1,100 +0,0 @@
-// polyfill fetch
-global.fetch = global.fetch || require('isomorphic-fetch')
-
-const assert = require('assert')
-const configManagerGen = require('../lib/mock-config-manager')
-
-describe('config-manager', function () {
- var configManager
-
- beforeEach(function () {
- configManager = configManagerGen()
- })
-
- describe('#setConfig', function () {
- it('should set the config key', function () {
- var testConfig = {
- provider: {
- type: 'rpc',
- rpcTarget: 'foobar',
- },
- }
- configManager.setConfig(testConfig)
- var result = configManager.getData()
-
- assert.equal(result.config.provider.type, testConfig.provider.type)
- assert.equal(result.config.provider.rpcTarget, testConfig.provider.rpcTarget)
- })
-
- it('setting wallet should not overwrite config', function () {
- var testConfig = {
- provider: {
- type: 'rpc',
- rpcTarget: 'foobar',
- },
- }
- configManager.setConfig(testConfig)
-
- var testWallet = {
- name: 'this is my fake wallet',
- }
- configManager.setWallet(testWallet)
-
- var result = configManager.getData()
- assert.equal(result.wallet.name, testWallet.name, 'wallet name is set')
- assert.equal(result.config.provider.rpcTarget, testConfig.provider.rpcTarget)
-
- testConfig.provider.type = 'something else!'
- configManager.setConfig(testConfig)
-
- result = configManager.getData()
- assert.equal(result.wallet.name, testWallet.name, 'wallet name is set')
- assert.equal(result.config.provider.rpcTarget, testConfig.provider.rpcTarget)
- assert.equal(result.config.provider.type, testConfig.provider.type)
- })
- })
-
- describe('wallet nicknames', function () {
- it('should return null when no nicknames are saved', function () {
- var nick = configManager.nicknameForWallet('0x0')
- assert.equal(nick, null, 'no nickname returned')
- })
-
- it('should persist nicknames', function () {
- var account = '0x0'
- var nick1 = 'foo'
- var nick2 = 'bar'
- configManager.setNicknameForWallet(account, nick1)
-
- var result1 = configManager.nicknameForWallet(account)
- assert.equal(result1, nick1)
-
- configManager.setNicknameForWallet(account, nick2)
- var result2 = configManager.nicknameForWallet(account)
- assert.equal(result2, nick2)
- })
- })
-
- describe('transactions', function () {
- beforeEach(function () {
- configManager.setTxList([])
- })
-
- describe('#getTxList', function () {
- it('when new should return empty array', function () {
- var result = configManager.getTxList()
- assert.ok(Array.isArray(result))
- assert.equal(result.length, 0)
- })
- })
-
- describe('#setTxList', function () {
- it('saves the submitted data to the tx list', function () {
- var target = [{ foo: 'bar' }]
- configManager.setTxList(target)
- var result = configManager.getTxList()
- assert.equal(result[0].foo, 'bar')
- })
- })
- })
-})
diff --git a/test/unit/localhostState.js b/test/unit/localhostState.js
new file mode 100644
index 000000000..f9fa157d7
--- /dev/null
+++ b/test/unit/localhostState.js
@@ -0,0 +1,21 @@
+
+/**
+ * @typedef {Object} FirstTimeState
+ * @property {Object} config Initial configuration parameters
+ * @property {Object} NetworkController Network controller state
+ */
+
+/**
+ * @type {FirstTimeState}
+ */
+const initialState = {
+ config: {},
+ NetworkController: {
+ provider: {
+ type: 'rpc',
+ rpcTarget: 'http://localhost:8545',
+ },
+ },
+}
+
+module.exports = initialState
diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
deleted file mode 100644
index 03101d37a..000000000
--- a/ui/app/account-and-transaction-details.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-// Main Views
-const TxView = require('./components/tx-view')
-const WalletView = require('./components/wallet-view')
-
-module.exports = AccountAndTransactionDetails
-
-inherits(AccountAndTransactionDetails, Component)
-function AccountAndTransactionDetails () {
- Component.call(this)
-}
-
-AccountAndTransactionDetails.prototype.render = function () {
- return h('div.account-and-transaction-details', [
- // wallet
- h(WalletView, {
- style: {
- },
- responsiveDisplayClassname: '.lap-visible',
- }, [
- ]),
-
- // transaction
- h(TxView, {
- style: {
- },
- }, [
- ]),
- ])
-}
-
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6a4423c62..ad1135489 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -10,6 +10,7 @@ const {
const ethUtil = require('ethereumjs-util')
const { fetchLocale } = require('../i18n-helper')
const log = require('loglevel')
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
const WebcamUtils = require('../lib/webcam-utils')
@@ -232,10 +233,13 @@ var actions = {
showAddTokenPage,
showConfirmAddTokensPage,
showRemoveTokenPage,
+ SHOW_ADD_SUGGESTED_TOKEN_PAGE: 'SHOW_ADD_SUGGESTED_TOKEN_PAGE',
+ showAddSuggestedTokenPage,
addToken,
addTokens,
removeToken,
updateTokens,
+ removeSuggestedTokens,
UPDATE_TOKENS: 'UPDATE_TOKENS',
setRpcTarget: setRpcTarget,
setProviderType: setProviderType,
@@ -323,6 +327,8 @@ var actions = {
showDeleteImportedAccount,
CONFIRM_CHANGE_PASSWORD: 'CONFIRM_CHANGE_PASSWORD',
confirmChangePassword,
+
+ createCancelTransaction,
}
module.exports = actions
@@ -425,12 +431,18 @@ function createNewVaultAndRestore (password, seed) {
log.debug(`background.createNewVaultAndRestore`)
return new Promise((resolve, reject) => {
- background.createNewVaultAndRestore(password, seed, err => {
+ background.clearSeedWordCache((err) => {
if (err) {
return reject(err)
}
- resolve()
+ background.createNewVaultAndRestore(password, seed, (err) => {
+ if (err) {
+ return reject(err)
+ }
+
+ resolve()
+ })
})
})
.then(() => dispatch(actions.unMarkPasswordForgotten()))
@@ -1181,6 +1193,10 @@ function updateAndApproveTx (txData) {
return txData
})
+ .catch((err) => {
+ dispatch(actions.hideLoadingIndication())
+ return Promise.reject(err)
+ })
}
}
@@ -1630,6 +1646,13 @@ function showConfirmAddTokensPage (transitionForward = true) {
}
}
+function showAddSuggestedTokenPage (transitionForward = true) {
+ return {
+ type: actions.SHOW_ADD_SUGGESTED_TOKEN_PAGE,
+ value: transitionForward,
+ }
+}
+
function showRemoveTokenPage (token, transitionForward = true) {
return {
type: actions.SHOW_REMOVE_TOKEN_PAGE,
@@ -1638,11 +1661,11 @@ function showRemoveTokenPage (token, transitionForward = true) {
}
}
-function addToken (address, symbol, decimals, network) {
+function addToken (address, symbol, decimals, image, network) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
- background.addToken(address, symbol, decimals, network, (err, tokens) => {
+ background.addToken(address, symbol, decimals, image, network, (err, tokens) => {
dispatch(actions.hideLoadingIndication())
if (err) {
dispatch(actions.displayWarning(err.message))
@@ -1692,6 +1715,27 @@ function addTokens (tokens) {
}
}
+function removeSuggestedTokens () {
+ return (dispatch) => {
+ dispatch(actions.showLoadingIndication())
+ return new Promise((resolve, reject) => {
+ background.removeSuggestedTokens((err, suggestedTokens) => {
+ dispatch(actions.hideLoadingIndication())
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ }
+ dispatch(actions.clearPendingTokens())
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+ return global.platform.closeCurrentWindow()
+ }
+ resolve(suggestedTokens)
+ })
+ })
+ .then(() => updateMetamaskStateFromBackground())
+ .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
+ }
+}
+
function updateTokens (newTokens) {
return {
type: actions.UPDATE_TOKENS,
@@ -1699,6 +1743,12 @@ function updateTokens (newTokens) {
}
}
+function clearPendingTokens () {
+ return {
+ type: actions.CLEAR_PENDING_TOKENS,
+ }
+}
+
function goBackToInitView () {
return {
type: actions.BACK_TO_INIT_MENU,
@@ -1774,6 +1824,29 @@ function retryTransaction (txId) {
}
}
+function createCancelTransaction (txId, customGasPrice) {
+ log.debug('background.cancelTransaction')
+ let newTxId
+
+ return dispatch => {
+ return new Promise((resolve, reject) => {
+ background.createCancelTransaction(txId, customGasPrice, (err, newState) => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ reject(err)
+ }
+
+ const { selectedAddressTxList } = newState
+ const { id } = selectedAddressTxList[selectedAddressTxList.length - 1]
+ newTxId = id
+ resolve(newState)
+ })
+ })
+ .then(newState => dispatch(actions.updateMetamaskState(newState)))
+ .then(() => newTxId)
+ }
+}
+
//
// config
//
@@ -1878,9 +1951,13 @@ function hideModal (payload) {
}
}
-function showSidebar () {
+function showSidebar ({ transitionName, type }) {
return {
type: actions.SIDEBAR_OPEN,
+ value: {
+ transitionName,
+ type,
+ },
}
}
@@ -2382,12 +2459,6 @@ function setPendingTokens (pendingTokens) {
}
}
-function clearPendingTokens () {
- return {
- type: actions.CLEAR_PENDING_TOKENS,
- }
-}
-
function showDeleteRPC (RPC_URL, transitionForward = true) {
return {
type: actions.SHOW_DELETE_RPC,
diff --git a/ui/app/app.js b/ui/app/app.js
index aa848ddb0..f816dfb1c 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -15,22 +15,22 @@ const SendTransactionScreen = require('./components/send/send.container')
const ConfirmTransaction = require('./components/pages/confirm-transaction')
// slideout menu
-const WalletView = require('./components/wallet-view')
+const Sidebar = require('./components/sidebars').default
// other views
-const Home = require('./components/pages/home')
+import Home from './components/pages/home'
+import Settings from './components/pages/settings'
const Authenticated = require('./components/pages/authenticated')
const Initialized = require('./components/pages/initialized')
-const Settings = require('./components/pages/settings')
const RestoreVaultPage = require('./components/pages/keychains/restore-vault').default
const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
const AddTokenPage = require('./components/pages/add-token')
const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
+const ConfirmAddSuggestedTokenPage = require('./components/pages/confirm-add-suggested-token')
const CreateAccountPage = require('./components/pages/create-account')
const NoticeScreen = require('./components/pages/notice')
const Loading = require('./components/loading-screen')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const NetworkDropdown = require('./components/dropdowns/network-dropdown')
const AccountMenu = require('./components/account-menu')
@@ -39,8 +39,7 @@ const Modal = require('./components/modals/index').Modal
// Global Alert
const Alert = require('./components/alert')
-const AppHeader = require('./components/app-header')
-
+import AppHeader from './components/app-header'
import UnlockPage from './components/pages/unlock-page'
// Routes
@@ -52,6 +51,7 @@ const {
RESTORE_VAULT_ROUTE,
ADD_TOKEN_ROUTE,
CONFIRM_ADD_TOKEN_ROUTE,
+ CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
NEW_ACCOUNT_ROUTE,
SEND_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
@@ -86,6 +86,7 @@ class App extends Component {
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }),
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
h(Authenticated, { path: CONFIRM_ADD_TOKEN_ROUTE, exact, component: ConfirmAddTokenPage }),
+ h(Authenticated, { path: CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, exact, component: ConfirmAddSuggestedTokenPage }),
h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }),
])
@@ -103,6 +104,7 @@ class App extends Component {
frequentRpcList,
currentView,
setMouseUserState,
+ sidebar,
} = this.props
const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
const loadMessage = loadingMessage || isLoadingNetwork ?
@@ -135,7 +137,12 @@ class App extends Component {
h(AppHeader),
// sidebar
- this.renderSidebar(),
+ h(Sidebar, {
+ sidebarOpen: sidebar.isOpen,
+ hideSidebar: this.props.hideSidebar,
+ transitionName: sidebar.transitionName,
+ type: sidebar.type,
+ }),
// network dropdown
h(NetworkDropdown, {
@@ -145,61 +152,18 @@ class App extends Component {
h(AccountMenu),
- (isLoading || isLoadingNetwork) && h(Loading, {
- loadingMessage: loadMessage,
- }),
+ h('div.main-container-wrapper', [
+ (isLoading || isLoadingNetwork) && h(Loading, {
+ loadingMessage: loadMessage,
+ }),
- // content
- this.renderRoutes(),
+ // content
+ this.renderRoutes(),
+ ]),
])
)
}
- renderSidebar () {
- return h('div', [
- h('style', `
- .sidebar-enter {
- transition: transform 300ms ease-in-out;
- transform: translateX(-100%);
- }
- .sidebar-enter.sidebar-enter-active {
- transition: transform 300ms ease-in-out;
- transform: translateX(0%);
- }
- .sidebar-leave {
- transition: transform 200ms ease-out;
- transform: translateX(0%);
- }
- .sidebar-leave.sidebar-leave-active {
- transition: transform 200ms ease-out;
- transform: translateX(-100%);
- }
- `),
-
- h(ReactCSSTransitionGroup, {
- transitionName: 'sidebar',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 200,
- }, [
- // A second instance of Walletview is used for non-mobile viewports
- this.props.sidebarOpen ? h(WalletView, {
- responsiveDisplayClassname: '.sidebar',
- style: {},
- }) : undefined,
-
- ]),
-
- // overlay
- // TODO: add onClick for overlay to close sidebar
- this.props.sidebarOpen ? h('div.sidebar-overlay', {
- style: {},
- onClick: () => {
- this.props.hideSidebar()
- },
- }, []) : undefined,
- ])
- }
-
toggleMetamaskActive () {
if (!this.props.isUnlocked) {
// currently inactive: redirect to password box
@@ -226,7 +190,7 @@ class App extends Component {
} else if (providerName === 'ropsten') {
name = this.context.t('connectingToRopsten')
} else if (providerName === 'kovan') {
- name = this.context.t('connectingToRopsten')
+ name = this.context.t('connectingToKovan')
} else if (providerName === 'rinkeby') {
name = this.context.t('connectingToRinkeby')
} else if (providerName === 'poa') {
@@ -272,7 +236,7 @@ App.propTypes = {
provider: PropTypes.object,
frequentRpcList: PropTypes.array,
currentView: PropTypes.object,
- sidebarOpen: PropTypes.bool,
+ sidebar: PropTypes.object,
alertOpen: PropTypes.bool,
hideSidebar: PropTypes.func,
isMascara: PropTypes.bool,
@@ -308,7 +272,7 @@ function mapStateToProps (state) {
const { appState, metamask } = state
const {
networkDropdownOpen,
- sidebarOpen,
+ sidebar,
alertOpen,
alertMessage,
isLoading,
@@ -335,7 +299,7 @@ function mapStateToProps (state) {
return {
// state from plugin
networkDropdownOpen,
- sidebarOpen,
+ sidebar,
alertOpen,
alertMessage,
isLoading,
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index 07ca6cf84..b8b002dcc 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { matchPath } from 'react-router-dom'
@@ -11,7 +11,7 @@ const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('
const Identicon = require('../identicon')
const NetworkIndicator = require('../network')
-class AppHeader extends Component {
+export default class AppHeader extends PureComponent {
static propTypes = {
history: PropTypes.object,
location: PropTypes.object,
@@ -107,20 +107,19 @@ class AppHeader extends Component {
onClick={() => history.push(DEFAULT_ROUTE)}
>
+ 
-
-
{ this.context.t('appName') }
-
- { this.context.t('beta') }
-
-
-
+
currency.code === upperCaseFiatSuffix)
- ? currencyFormatter.format(Number(fiatDisplayNumber), {
- code: upperCaseFiatSuffix,
- })
- : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}`
-
- return h('div.fiat-amount', {
- style: {},
- }, display)
-}
-
BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index 1e0ef1b64..4a06333e7 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -6,6 +6,7 @@ const CLASSNAME_DEFAULT = 'btn-default'
const CLASSNAME_PRIMARY = 'btn-primary'
const CLASSNAME_SECONDARY = 'btn-secondary'
const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_RAISED = 'btn-raised'
const CLASSNAME_LARGE = 'btn--large'
const typeHash = {
@@ -13,6 +14,7 @@ const typeHash = {
primary: CLASSNAME_PRIMARY,
secondary: CLASSNAME_SECONDARY,
confirm: CLASSNAME_CONFIRM,
+ raised: CLASSNAME_RAISED,
}
export default class Button extends Component {
@@ -20,7 +22,7 @@ export default class Button extends Component {
type: PropTypes.string,
large: PropTypes.bool,
className: PropTypes.string,
- children: PropTypes.string,
+ children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
}
render () {
@@ -29,6 +31,7 @@ export default class Button extends Component {
return (
)
}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
index e99b0f631..89ff25578 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
@@ -1,5 +1,5 @@
.confirm-page-container-error {
- height: 32px;
+ min-height: 32px;
border: 1px solid $monzo;
color: $monzo;
background: lighten($monzo, 56%);
@@ -8,10 +8,14 @@
display: flex;
justify-content: flex-start;
align-items: center;
- padding-left: 16px;
+ padding: 8px 16px;
&__icon {
margin-right: 8px;
flex: 0 0 auto;
}
+
+ &__text {
+ overflow: auto;
+ }
}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
index 3b1ee62c5..38b158fd3 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -4,7 +4,7 @@ import classnames from 'classnames'
import Identicon from '../../../identicon'
const ConfirmPageContainerSummary = props => {
- const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce } = props
+ const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce, assetImage } = props
return (
@@ -27,6 +27,7 @@ const ConfirmPageContainerSummary = props => {
className="confirm-page-container-summary__identicon"
diameter={36}
address={identiconAddress}
+ image={assetImage}
/>
)
}
@@ -51,6 +52,7 @@ ConfirmPageContainerSummary.propTypes = {
className: PropTypes.string,
identiconAddress: PropTypes.string,
nonce: PropTypes.string,
+ assetImage: PropTypes.string,
}
export default ConfirmPageContainerSummary
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
index 24ff05353..b1582051e 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js
@@ -38,6 +38,7 @@ export default class ConfirmPageContainer extends Component {
detailsComponent: PropTypes.node,
identiconAddress: PropTypes.string,
nonce: PropTypes.string,
+ assetImage: PropTypes.string,
summaryComponent: PropTypes.node,
warning: PropTypes.string,
// Footer
@@ -70,8 +71,10 @@ export default class ConfirmPageContainer extends Component {
onSubmit,
identiconAddress,
nonce,
+ assetImage,
warning,
} = this.props
+ const renderAssetImage = contentComponent || (!contentComponent && !identiconAddress)
return (
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d..09137d39a 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -7,6 +7,8 @@ const actions = require('../../actions')
const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
const ShapeshiftForm = require('../shapeshift-form')
+import Button from '../button'
+
let DIRECT_DEPOSIT_ROW_TITLE
let DIRECT_DEPOSIT_ROW_TEXT
let COINBASE_ROW_TITLE
@@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({
]),
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
- h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
+ h(Button, {
+ type: 'primary',
+ className: 'deposit-ether-modal__deposit-button',
+ large: true,
onClick: onButtonClick,
}, [buttonLabel]),
]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 80ece425f..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -1,3 +1,4 @@
+const log = require('loglevel')
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
@@ -10,20 +11,35 @@ const { getSelectedIdentity } = require('../../selectors')
const ReadOnlyInput = require('../readonly-input')
const copyToClipboard = require('copy-to-clipboard')
const { checksumAddress } = require('../../util')
+import Button from '../button'
-function mapStateToProps (state) {
- return {
- warning: state.appState.warning,
- privateKey: state.appState.accountDetail.privateKey,
- network: state.metamask.network,
- selectedIdentity: getSelectedIdentity(state),
- previousModalState: state.appState.modal.previousModalState.name,
+function mapStateToPropsFactory () {
+ let selectedIdentity = null
+ return function mapStateToProps (state) {
+ // We should **not** change the identity displayed here even if it changes from underneath us.
+ // If we do, we will be showing the user one private key and a **different** address and name.
+ // Note that the selected identity **will** change from underneath us when we unlock the keyring
+ // which is the expected behavior that we are side-stepping.
+ selectedIdentity = selectedIdentity || getSelectedIdentity(state)
+ return {
+ warning: state.appState.warning,
+ privateKey: state.appState.accountDetail.privateKey,
+ network: state.metamask.network,
+ selectedIdentity,
+ previousModalState: state.appState.modal.previousModalState.name,
+ }
}
}
function mapDispatchToProps (dispatch) {
return {
- exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+ exportAccount: (password, address) => {
+ return dispatch(actions.exportAccount(password, address))
+ .then((res) => {
+ dispatch(actions.hideWarning())
+ return res
+ })
+ },
showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
hideModal: () => dispatch(actions.hideModal()),
}
@@ -36,6 +52,7 @@ function ExportPrivateKeyModal () {
this.state = {
password: '',
privateKey: null,
+ showWarning: true,
}
}
@@ -43,14 +60,18 @@ ExportPrivateKeyModal.contextTypes = {
t: PropTypes.func,
}
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
+module.exports = connect(mapStateToPropsFactory, mapDispatchToProps)(ExportPrivateKeyModal)
ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
const { exportAccount } = this.props
exportAccount(password, address)
- .then(privateKey => this.setState({ privateKey }))
+ .then(privateKey => this.setState({
+ privateKey,
+ showWarning: false,
+ }))
+ .catch((e) => log.error(e))
}
ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
@@ -77,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
})
}
-ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
- return h('button', {
- className,
- onClick,
- }, label)
-}
-
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [
- !privateKey && this.renderButton(
- 'btn-default btn--large export-private-key__button export-private-key__button--cancel',
- () => hideModal(),
- 'Cancel'
- ),
+ !privateKey && h(Button, {
+ type: 'default',
+ large: true,
+ className: 'export-private-key__button export-private-key__button--cancel',
+ onClick: () => hideModal(),
+ }, this.context.t('cancel')),
(privateKey
- ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
- : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+ ? (
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'export-private-key__button',
+ onClick: () => hideModal(),
+ }, this.context.t('done'))
+ ) : (
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'export-private-key__button',
+ onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+ }, this.context.t('confirm'))
+ )
),
])
@@ -110,9 +138,13 @@ ExportPrivateKeyModal.prototype.render = function () {
} = this.props
const { name, address } = selectedIdentity
- const { privateKey } = this.state
+ const {
+ privateKey,
+ showWarning,
+ } = this.state
return h(AccountModalContainer, {
+ selectedIdentity,
showBackButton: previousModalState === 'ACCOUNT_DETAILS',
backButtonAction: () => showAccountDetailModal(),
}, [
@@ -134,7 +166,7 @@ ExportPrivateKeyModal.prototype.render = function () {
this.renderPasswordInput(privateKey),
- !warning ? null : h('span.private-key-password-error', warning),
+ showWarning && warning ? h('span.private-key-password-error', warning) : null,
]),
h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 1518fa9a0..fb38516d3 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -10,6 +10,7 @@ function mapStateToProps (state) {
return {
network: state.metamask.network,
token: state.appState.modal.modalState.props.token,
+ assetImages: state.metamask.assetImages,
}
}
@@ -40,8 +41,9 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmat
HideTokenConfirmationModal.prototype.render = function () {
- const { token, network, hideToken, hideModal } = this.props
+ const { token, network, hideToken, hideModal, assetImages } = this.props
const { symbol, address } = token
+ const image = assetImages[address]
return h('div.hide-token-confirmation', {}, [
h('div.hide-token-confirmation__container', {
@@ -55,6 +57,7 @@ HideTokenConfirmationModal.prototype.render = function () {
diameter: 45,
address,
network,
+ image,
}),
h('div.hide-token-confirmation__symbol', {}, symbol),
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 06c3ef709..61434cbcf 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -109,7 +109,7 @@
&--selected {
color: $curious-blue;
- border-bottom: 3px solid $curious-blue;
+ border-bottom: 2px solid $curious-blue;
}
}
@@ -182,5 +182,7 @@
max-height: 82vh;
min-height: 570px;
flex: 0 0 auto;
+ margin-right: auto;
+ margin-left: auto;
}
}
diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index 5a5de1e5a..a8458604e 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -1,8 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
export default class PageContainerHeader extends Component {
-
static propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
@@ -11,8 +11,18 @@ export default class PageContainerHeader extends Component {
onBackButtonClick: PropTypes.func,
backButtonStyles: PropTypes.object,
backButtonString: PropTypes.string,
- children: PropTypes.node,
- };
+ tabs: PropTypes.node,
+ }
+
+ renderTabs () {
+ const { tabs } = this.props
+
+ return tabs && (
+
@@ -84,6 +87,7 @@ export default class ConfirmPageContainer extends Component {
senderAddress={fromAddress}
recipientName={toName}
recipientAddress={toAddress}
+ assetImage={renderAssetImage ? assetImage : undefined}
/>
{
@@ -101,6 +105,7 @@ export default class ConfirmPageContainer extends Component {
errorKey={errorKey}
identiconAddress={identiconAddress}
nonce={nonce}
+ assetImage={assetImage}
warning={warning}
/>
)
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
new file mode 100644
index 000000000..e4eb58a2a
--- /dev/null
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { ETH, GWEI } from '../../constants/common'
+
+export default class CurrencyDisplay extends PureComponent {
+ static propTypes = {
+ className: PropTypes.string,
+ displayValue: PropTypes.string,
+ prefix: PropTypes.string,
+ // Used in container
+ currency: PropTypes.oneOf([ETH]),
+ denomination: PropTypes.oneOf([GWEI]),
+ value: PropTypes.string,
+ numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ hideLabel: PropTypes.bool,
+ }
+
+ render () {
+ const { className, displayValue, prefix } = this.props
+ const text = `${prefix || ''}${displayValue}`
+
+ return (
+
+ { text }
+
+ )
+ }
+}
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
new file mode 100644
index 000000000..6644a1099
--- /dev/null
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import CurrencyDisplay from './currency-display.component'
+import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
+
+const mapStateToProps = (state, ownProps) => {
+ const { value, numberOfDecimals = 2, currency, denomination, hideLabel } = ownProps
+ const { metamask: { currentCurrency, conversionRate } } = state
+
+ const toCurrency = currency || currentCurrency
+ const convertedValue = getValueFromWeiHex({
+ value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
+ })
+ const formattedValue = formatCurrency(convertedValue, toCurrency)
+ const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
+
+ return {
+ displayValue,
+ }
+}
+
+export default connect(mapStateToProps)(CurrencyDisplay)
diff --git a/ui/app/components/currency-display/index.js b/ui/app/components/currency-display/index.js
new file mode 100644
index 000000000..38f08765f
--- /dev/null
+++ b/ui/app/components/currency-display/index.js
@@ -0,0 +1 @@
+export { default } from './currency-display.container'
diff --git a/ui/app/components/currency-display/tests/currency-display.component.test.js b/ui/app/components/currency-display/tests/currency-display.component.test.js
new file mode 100644
index 000000000..d9ef052f1
--- /dev/null
+++ b/ui/app/components/currency-display/tests/currency-display.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CurrencyDisplay from '../currency-display.component'
+
+describe('CurrencyDisplay Component', () => {
+ it('should render text with a className', () => {
+ const wrapper = shallow(
+ { decimalValue }
+
+ )
+ }
+}
diff --git a/ui/app/components/hex-to-decimal/index.js b/ui/app/components/hex-to-decimal/index.js
new file mode 100644
index 000000000..6e8567ca9
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/index.js
@@ -0,0 +1 @@
+export { default } from './hex-to-decimal.component'
diff --git a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
new file mode 100644
index 000000000..c98da9ad4
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import HexToDecimal from '../hex-to-decimal.component'
+
+describe('HexToDecimal Component', () => {
+ it('should render a prefixed hex as a decimal with a className', () => {
+ const wrapper = shallow(
+
+
sidebarOpen ? hideSidebar() : showSidebar()}
+ />
+
+
+
+ )
+ }
+
+ )
+ }
+}
diff --git a/ui/app/components/menu-bar/menu-bar.container.js b/ui/app/components/menu-bar/menu-bar.container.js
new file mode 100644
index 000000000..ae32882ae
--- /dev/null
+++ b/ui/app/components/menu-bar/menu-bar.container.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import MenuBar from './menu-bar.component'
+import { showSidebar, hideSidebar } from '../../actions'
+
+const mapStateToProps = state => {
+ const { appState: { sidebar: { isOpen }, isMascara } } = state
+
+ return {
+ sidebarOpen: isOpen,
+ isMascara,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ showSidebar: () => {
+ dispatch(showSidebar({
+ transitionName: 'sidebar-right',
+ type: 'wallet-view',
+ }))
+ },
+ hideSidebar: () => dispatch(hideSidebar()),
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 15a187723..2a28b56d7 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const ethNetProps = require('eth-net-props')
const QrView = require('../qr-code')
const EditableLabel = require('../editable-label')
+import Button from '../button'
+
function mapStateToProps (state) {
return {
network: state.metamask.network,
@@ -61,7 +63,7 @@ AccountDetailsModal.prototype.render = function () {
let exportPrivateKeyFeatureEnabled = true
// This feature is disabled for hardware wallets
- if (keyring.type.search('Hardware') !== -1) {
+ if (keyring && keyring.type.search('Hardware') !== -1) {
exportPrivateKeyFeatureEnabled = false
}
@@ -80,12 +82,17 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'),
- h('button.btn-primary.account-modal__button', {
+ h(Button, {
+ type: 'primary',
+ className: 'account-modal__button',
onClick: () => global.platform.openWindow({ url: ethNetProps.explorerLinks.getExplorerAccountLinkFor(address, network) }),
}, this.context.t('etherscanView')),
// Holding on redesign for Export Private Key functionality
- exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
+
+ exportPrivateKeyFeatureEnabled ? h(Button, {
+ type: 'primary',
+ className: 'account-modal__button',
onClick: () => showExportPrivateKeyModal(),
}, this.context.t('exportPrivateKey')) : null,
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index a9856b20f..aa0593df8 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -7,9 +7,9 @@ const actions = require('../../actions')
const { getSelectedIdentity } = require('../../selectors')
const Identicon = require('../identicon')
-function mapStateToProps (state) {
+function mapStateToProps (state, ownProps) {
return {
- selectedIdentity: getSelectedIdentity(state),
+ selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
}
}
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 0337c5413..3f526bd43 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import GasModalCard from '../../customize-gas-modal/gas-modal-card'
import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../button'
import {
getDecimalGasLimit,
@@ -116,21 +117,23 @@ export default class CustomizeGas extends Component {
{ t('revert') }
global.platform.openExtensionInBrowser()}
+ >
+ 
+
+
+
-
-
-
+ { tabs }
+
+
{ this.renderHeaderRow() }
- { children }
-
{
title &&
)
}
-
}
diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index bcb93d401..3612e676c 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -1,14 +1,14 @@
import React, { Component } from 'react'
-import classnames from 'classnames'
import PropTypes from 'prop-types'
import ethUtil from 'ethereumjs-util'
import { checkExistingAddresses } from './util'
import { tokenInfoGetter } from '../../../token-util'
import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../../routes'
-import Button from '../../button'
import TextField from '../../text-field'
import TokenList from './token-list'
import TokenSearch from './token-search'
+import PageContainer from '../../page-container'
+import { Tabs, Tab } from '../../tabs'
const emptyAddr = '0x0000000000000000000000000000000000000000'
const SEARCH_TAB = 'SEARCH'
@@ -206,7 +206,7 @@ class AddToken extends Component {
const validDecimals = customDecimals !== null &&
customDecimals !== '' &&
customDecimals >= 0 &&
- customDecimals < 36
+ customDecimals <= 36
let customDecimalsError = null
if (!validDecimals) {
@@ -285,65 +285,33 @@ class AddToken extends Component {
)
}
+ renderTabs () {
+ return (
+
+
+ { this.renderSearchToken() }
+
+
+ { this.renderCustomTokenForm() }
+
+
+ )
+ }
+
render () {
- const { displayedTab } = this.state
const { history, clearPendingTokens } = this.props
return (
- this.handleNext()}
+ disabled={this.hasError() || !this.hasSelected()}
+ onCancel={() => {
+ clearPendingTokens()
+ history.push(DEFAULT_ROUTE)
+ }}
+ />
)
}
}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
new file mode 100644
index 000000000..c24e1e0ea
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DEFAULT_ROUTE } from '../../../routes'
+import Button from '../../button'
+import Identicon from '../../../components/identicon'
+import TokenBalance from '../../token-balance'
+
+export default class ConfirmAddSuggestedToken extends Component {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ history: PropTypes.object,
+ clearPendingTokens: PropTypes.func,
+ addToken: PropTypes.func,
+ pendingTokens: PropTypes.object,
+ removeSuggestedTokens: PropTypes.func,
+ }
+
+ componentDidMount () {
+ const { pendingTokens = {}, history } = this.props
+
+ if (Object.keys(pendingTokens).length === 0) {
+ history.push(DEFAULT_ROUTE)
+ }
+ }
+
+ getTokenName (name, symbol) {
+ return typeof name === 'undefined'
+ ? symbol
+ : `${name} (${symbol})`
+ }
+
+ render () {
+ const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
+ const pendingTokenKey = Object.keys(pendingTokens)[0]
+ const pendingToken = pendingTokens[pendingTokenKey]
+
+ return (
+
{
- wrapper = shallow( this.setState({ senderAddressCopied: false })}
+ >
+
+ )
+ }
+
+ renderRecipientIdenticon () {
+ const { recipientAddress, assetImage } = this.props
+
+ return !this.props.addressOnly && (
+
{ title }
@@ -59,6 +72,7 @@ export default class PageContainerHeader extends Component {
/>
}
+ { this.renderTabs() }
)
}
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
index 9bfb99ade..3a2274a29 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/page-container/page-container.component.js
@@ -1,30 +1,82 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer'
-export default class PageContainer extends Component {
-
+export default class PageContainer extends PureComponent {
static propTypes = {
// PageContainerHeader props
- title: PropTypes.string.isRequired,
- subtitle: PropTypes.string,
+ backButtonString: PropTypes.string,
+ backButtonStyles: PropTypes.object,
+ onBackButtonClick: PropTypes.func,
onClose: PropTypes.func,
showBackButton: PropTypes.bool,
- onBackButtonClick: PropTypes.func,
- backButtonStyles: PropTypes.object,
- backButtonString: PropTypes.string,
+ subtitle: PropTypes.string,
+ title: PropTypes.string.isRequired,
+ // Tabs-related props
+ defaultActiveTabIndex: PropTypes.number,
+ tabsComponent: PropTypes.node,
// Content props
- ContentComponent: PropTypes.func,
- contentComponentProps: PropTypes.object,
+ contentComponent: PropTypes.node,
// PageContainerFooter props
- onCancel: PropTypes.func,
cancelText: PropTypes.string,
+ disabled: PropTypes.bool,
+ onCancel: PropTypes.func,
onSubmit: PropTypes.func,
submitText: PropTypes.string,
- disabled: PropTypes.bool,
- };
+ }
+
+ state = {
+ activeTabIndex: this.props.defaultActiveTabIndex || 0,
+ }
+
+ handleTabClick (activeTabIndex) {
+ this.setState({ activeTabIndex })
+ }
+
+ renderTabs () {
+ const { tabsComponent } = this.props
+
+ if (!tabsComponent) {
+ return
+ }
+
+ const numberOfTabs = React.Children.count(tabsComponent.props.children)
+
+ return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
+ return child && React.cloneElement(child, {
+ onClick: index => this.handleTabClick(index),
+ tabIndex,
+ isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
+ key: tabIndex,
+ className: 'page-container__tab',
+ activeClassName: 'page-container__tab--selected',
+ })
+ })
+ }
+
+ renderActiveTabContent () {
+ const { tabsComponent } = this.props
+ const { children } = tabsComponent.props
+ const { activeTabIndex } = this.state
+
+ return children[activeTabIndex]
+ ? children[activeTabIndex].props.children
+ : children.props.children
+ }
+
+ renderContent () {
+ const { contentComponent, tabsComponent } = this.props
+
+ if (contentComponent) {
+ return contentComponent
+ } else if (tabsComponent) {
+ return this.renderActiveTabContent()
+ } else {
+ return null
+ }
+ }
render () {
const {
@@ -35,8 +87,6 @@ export default class PageContainer extends Component {
onBackButtonClick,
backButtonStyles,
backButtonString,
- ContentComponent,
- contentComponentProps,
onCancel,
cancelText,
onSubmit,
@@ -54,9 +104,10 @@ export default class PageContainer extends Component {
onBackButtonClick={onBackButtonClick}
backButtonStyles={backButtonStyles}
backButtonString={backButtonString}
+ tabs={this.renderTabs()}
/>
-
-
+
-
-
- { this.context.t('addTokens') }
-
-
-
- this.setState({ displayedTab: SEARCH_TAB })}
- >
- { this.context.t('search') }
-
- this.setState({ displayedTab: CUSTOM_TOKEN_TAB })}
- >
- { this.context.t('customToken') }
-
-
- {
- displayedTab === CUSTOM_TOKEN_TAB
- ? this.renderCustomTokenForm()
- : this.renderSearchToken()
- }
-
-
-
-
-
-
+
+ )
+ }
+}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
new file mode 100644
index 000000000..1f2737e52
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -0,0 +1,29 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
+import { withRouter } from 'react-router-dom'
+
+const extend = require('xtend')
+
+const { addToken, removeSuggestedTokens } = require('../../../actions')
+
+const mapStateToProps = ({ metamask }) => {
+ const { pendingTokens, suggestedTokens } = metamask
+ const params = extend(pendingTokens, suggestedTokens)
+
+ return {
+ pendingTokens: params,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)),
+ removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/confirm-add-suggested-token/index.js b/ui/app/components/pages/confirm-add-suggested-token/index.js
new file mode 100644
index 000000000..2ca56b43c
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/index.js
@@ -0,0 +1,2 @@
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.container'
+module.exports = ConfirmAddSuggestedToken
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 65d654b92..3dcc8cda9 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes'
import Button from '../../button'
-import Identicon from '../../../components/identicon'
-import TokenBalance from './token-balance'
+import Identicon from '../../identicon'
+import TokenBalance from '../../token-balance'
export default class ConfirmAddToken extends Component {
static contextTypes = {
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/index.js b/ui/app/components/pages/confirm-add-token/token-balance/index.js
deleted file mode 100644
index 6fb5c8223..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import TokenBalance from './token-balance.container'
-module.exports = TokenBalance
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
deleted file mode 100644
index 976788d4c..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class TokenBalance extends Component {
- static propTypes = {
- string: PropTypes.string,
- symbol: PropTypes.string,
- error: PropTypes.string,
- }
-
- render () {
- return (
-
+
+
+ { this.context.t('addSuggestedTokens') }
+
+
+ { this.context.t('likeToAddTokens') }
+
+
+
+
+
+
+
+
+ { this.context.t('token') }
+
+
+ { this.context.t('balance') }
+
+
+ {
+ Object.entries(pendingTokens)
+ .map(([ address, token ]) => {
+ const { name, symbol, image } = token
+
+ return (
+
+
+
+ )
+ })
+ }
+
+
+
+ { this.getTokenName(name, symbol) }
+
+
+
+
+
+
+
+ { this.props.string }
- )
- }
-}
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 961aa304e..56cfbccc8 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -38,6 +38,7 @@ export default class ConfirmTransactionBase extends Component {
isTxReprice: PropTypes.bool,
methodData: PropTypes.object,
nonce: PropTypes.string,
+ assetImage: PropTypes.string,
sendTransaction: PropTypes.func,
showCustomizeGasModal: PropTypes.func,
showTransactionConfirmedModal: PropTypes.func,
@@ -73,6 +74,7 @@ export default class ConfirmTransactionBase extends Component {
state = {
submitting: false,
+ submitError: null,
}
componentDidUpdate () {
@@ -268,7 +270,7 @@ export default class ConfirmTransactionBase extends Component {
return
}
- this.setState({ submitting: true })
+ this.setState({ submitting: true, submitError: null })
if (onSubmit) {
Promise.resolve(onSubmit(txData))
@@ -280,7 +282,9 @@ export default class ConfirmTransactionBase extends Component {
this.setState({ submitting: false })
history.push(DEFAULT_ROUTE)
})
- .catch(() => this.setState({ submitting: false }))
+ .catch(error => {
+ this.setState({ submitting: false, submitError: error.message })
+ })
}
}
@@ -307,9 +311,10 @@ export default class ConfirmTransactionBase extends Component {
contentComponent,
onEdit,
nonce,
+ assetImage,
warning,
} = this.props
- const { submitting } = this.state
+ const { submitting, submitError } = this.state
const { name } = methodData
const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@@ -331,8 +336,9 @@ export default class ConfirmTransactionBase extends Component {
dataComponent={this.renderData()}
contentComponent={contentComponent}
nonce={nonce}
+ assetImage={assetImage}
identiconAddress={identiconAddress}
- errorMessage={errorMessage}
+ errorMessage={errorMessage || submitError}
errorKey={propsErrorKey || errorKey}
warning={warning}
disabled={!propsValid || !valid || submitting}
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 0c0deff18..8f54c8040 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -52,8 +52,9 @@ const mapStateToProps = (state, props) => {
accounts,
selectedAddress,
selectedAddressTxList,
+ assetImages,
} = metamask
-
+ const assetImage = assetImages[txParamsToAddress]
const { balance } = accounts[selectedAddress]
const { name: fromName } = identities[selectedAddress]
const toAddress = propsToAddress || txParamsToAddress
@@ -88,6 +89,7 @@ const mapStateToProps = (state, props) => {
conversionRate,
transactionStatus,
nonce,
+ assetImage,
}
}
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 0280f73c6..2c44b6094 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -12,25 +12,27 @@ import {
CONFIRM_TOKEN_METHOD_PATH,
SIGNATURE_REQUEST_PATH,
} from '../../../routes'
-import { isConfirmDeployContract } from './confirm-transaction-switch.util'
+import { isConfirmDeployContract } from '../../../helpers/transactions.util'
import {
TOKEN_METHOD_TRANSFER,
TOKEN_METHOD_APPROVE,
TOKEN_METHOD_TRANSFER_FROM,
-} from './confirm-transaction-switch.constants'
+} from '../../../constants/transactions'
export default class ConfirmTransactionSwitch extends Component {
static propTypes = {
txData: PropTypes.object,
methodData: PropTypes.object,
- fetchingMethodData: PropTypes.bool,
+ fetchingData: PropTypes.bool,
+ isEtherTransaction: PropTypes.bool,
}
redirectToTransaction () {
const {
txData,
methodData: { name },
- fetchingMethodData,
+ fetchingData,
+ isEtherTransaction,
} = this.props
const { id, txParams: { data } = {} } = txData
@@ -39,10 +41,15 @@ export default class ConfirmTransactionSwitch extends Component {
return
+
+ )
+ }
+}
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
new file mode 100644
index 000000000..58001df6b
--- /dev/null
+++ b/ui/app/components/pages/home/home.container.js
@@ -0,0 +1,30 @@
+import Home from './home.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { unconfirmedTransactionsCountSelector } from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+ const { metamask, appState } = state
+ const {
+ noActiveNotices,
+ lostAccounts,
+ seedWords,
+ suggestedTokens,
+ } = metamask
+ const { forgottenPassword } = appState
+
+ return {
+ noActiveNotices,
+ lostAccounts,
+ forgottenPassword,
+ seedWords,
+ suggestedTokens,
+ unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps)
+)(Home)
diff --git a/ui/app/components/pages/home/index.js b/ui/app/components/pages/home/index.js
new file mode 100644
index 000000000..4474ba5b8
--- /dev/null
+++ b/ui/app/components/pages/home/index.js
@@ -0,0 +1 @@
+export { default } from './home.container'
diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
index b15c59863..6551278f5 100644
--- a/ui/app/components/pages/index.scss
+++ b/ui/app/components/pages/index.scss
@@ -3,3 +3,5 @@
@import './add-token/index';
@import './confirm-add-token/index';
+
+@import './settings/index';
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7d7d3f462..7782b541c 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,6 +8,8 @@ const { requestRevealSeedWords } = require('../../../actions')
const { DEFAULT_ROUTE } = require('../../../routes')
const ExportTextContainer = require('../../export-text-container')
+import Button from '../../button'
+
const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
@@ -106,10 +108,16 @@ class RevealSeedPage extends Component {
renderPasswordPromptFooter () {
return (
h('.page-container__footer', [
- h('button.btn-default.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('cancel')),
- h('button.btn-primary.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'page-container__footer-button',
onClick: event => this.handleSubmit(event),
disabled: this.state.password === '',
}, this.context.t('next')),
@@ -120,7 +128,10 @@ class RevealSeedPage extends Component {
renderRevealSeedFooter () {
return (
h('.page-container__footer', [
- h('button.btn-default.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('close')),
])
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js
index aee17e0e8..44a9ffa63 100644
--- a/ui/app/components/pages/settings/index.js
+++ b/ui/app/components/pages/settings/index.js
@@ -1,64 +1 @@
-const { Component } = require('react')
-const { Switch, Route, matchPath } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const TabBar = require('../../tab-bar')
-const Settings = require('./settings')
-const Info = require('./info')
-const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
-
-class Config extends Component {
- renderTabs () {
- const { history, location } = this.props
-
- return h('div.settings__tabs', [
- h(TabBar, {
- tabs: [
- { content: this.context.t('settings'), key: SETTINGS_ROUTE },
- { content: this.context.t('info'), key: INFO_ROUTE },
- ],
- isActive: key => matchPath(location.pathname, { path: key, exact: true }),
- onSelect: key => history.push(key),
- }),
- ])
- }
-
- render () {
- const { history } = this.props
-
- return (
- h('.main-container.settings', {}, [
- h('.settings__header', [
- h('div.settings__close-button', {
- onClick: () => history.push(DEFAULT_ROUTE),
- }),
- this.renderTabs(),
- ]),
- h(Switch, [
- h(Route, {
- exact: true,
- path: INFO_ROUTE,
- component: Info,
- }),
- h(Route, {
- exact: true,
- path: SETTINGS_ROUTE,
- component: Settings,
- }),
- ]),
- ])
- )
- }
-}
-
-Config.propTypes = {
- location: PropTypes.object,
- history: PropTypes.object,
- t: PropTypes.func,
-}
-
-Config.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = Config
+export { default } from './settings.component'
diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss
new file mode 100644
index 000000000..138ebcfc5
--- /dev/null
+++ b/ui/app/components/pages/settings/index.scss
@@ -0,0 +1,80 @@
+@import './info-tab/index';
+
+@import './settings-tab/index';
+
+.settings-page {
+ position: relative;
+ background: $white;
+ display: flex;
+ flex-flow: column nowrap;
+
+ &__header {
+ padding: 25px 25px 0;
+ }
+
+ &__close-button::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $dusty-gray;
+ position: absolute;
+ top: 25px;
+ right: 30px;
+ cursor: pointer;
+ }
+
+ &__content {
+ padding: 25px;
+ height: auto;
+ overflow: auto;
+ }
+
+ &__content-row {
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0 20px;
+
+ @media screen and (max-width: 575px) {
+ flex-direction: column;
+ padding: 10px 0;
+ }
+ }
+
+ &__content-item {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 0 5px;
+ min-height: 71px;
+
+ @media screen and (max-width: 575px) {
+ height: initial;
+ padding: 5px 0;
+ }
+
+ &--without-height {
+ height: initial;
+ }
+ }
+
+ &__content-label {
+ text-transform: capitalize;
+ }
+
+ &__content-description {
+ font-size: 14px;
+ color: $dusty-gray;
+ padding-top: 5px;
+ }
+
+ &__content-item-col {
+ max-width: 300px;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (max-width: 575px) {
+ max-width: 100%;
+ width: 100%;
+ }
+ }
+}
diff --git a/ui/app/components/pages/settings/info-tab/index.js b/ui/app/components/pages/settings/info-tab/index.js
new file mode 100644
index 000000000..7556a258d
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.js
@@ -0,0 +1 @@
+export { default } from './info-tab.component'
diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/components/pages/settings/info-tab/index.scss
new file mode 100644
index 000000000..43ad6f652
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.scss
@@ -0,0 +1,56 @@
+.info-tab {
+ &__logo-wrapper {
+ height: 80px;
+ margin-bottom: 20px;
+ }
+
+ &__logo {
+ max-height: 100%;
+ max-width: 100%;
+ }
+
+ &__item {
+ padding: 10px 0;
+ }
+
+ &__link-header {
+ padding-bottom: 15px;
+
+ @media screen and (max-width: 575px) {
+ padding-bottom: 5px;
+ }
+ }
+
+ &__link-item {
+ padding: 15px 0;
+
+ @media screen and (max-width: 575px) {
+ padding: 5px 0;
+ }
+ }
+
+ &__link-text {
+ color: $curious-blue;
+ }
+
+ &__version-number {
+ padding-top: 5px;
+ font-size: 13px;
+ color: $dusty-gray;
+ }
+
+ &__separator {
+ margin: 15px 0;
+ width: 80px;
+ border-color: $alto;
+ border: none;
+ height: 1px;
+ background-color: $alto;
+ color: $alto;
+ }
+
+ &__about {
+ color: $dusty-gray;
+ margin-bottom: 15px;
+ }
+}
diff --git a/ui/app/components/pages/settings/info-tab/info-tab.component.js b/ui/app/components/pages/settings/info-tab/info-tab.component.js
new file mode 100644
index 000000000..72f7d835e
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/info-tab.component.js
@@ -0,0 +1,136 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class InfoTab extends PureComponent {
+ state = {
+ version: global.platform.getVersion(),
+ }
+
+ static propTypes = {
+ tab: PropTypes.string,
+ metamask: PropTypes.object,
+ setCurrentCurrency: PropTypes.func,
+ setRpcTarget: PropTypes.func,
+ displayWarning: PropTypes.func,
+ revealSeedConfirmation: PropTypes.func,
+ warning: PropTypes.string,
+ location: PropTypes.object,
+ history: PropTypes.object,
+ }
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ renderInfoLinks () {
+ const { t } = this.context
+
+ return (
+
+
+
+
+ + + +
+ )
+ }
+
+ render () {
+ const { t } = this.context
+
+ return (
+
+ { t('links') }
+
+
+
+
+ + + + +
+
+ )
+ }
+}
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
deleted file mode 100644
index a0f994ac2..000000000
--- a/ui/app/components/pages/settings/info.js
+++ /dev/null
@@ -1,96 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-
-class Info extends Component {
- constructor (props) {
- super(props)
-
- this.state = {
- version: global.platform.getVersion(),
- }
- }
-
- renderLogo () {
- return (
- h('div.settings__info-logo-wrapper', [
- h('img.settings__info-logo', { src: 'images/info-logo.png' }),
- ])
- )
- }
-
- renderInfoLinks () {
- return (
- h('div.settings__content-item.settings__content-item--without-height', [
- h('div.settings__info-link-header', this.context.t('links')),
- h('div.settings__info-link-item', [
- h('a', {
- href: 'https://metamask.io/privacy.html',
- target: '_blank',
- }, [
- h('span.settings__info-link', this.context.t('privacyMsg')),
- ]),
- ]),
- h('div.settings__info-link-item', [
- h('a', {
- href: 'https://metamask.io/terms.html',
- target: '_blank',
- }, [
- h('span.settings__info-link', this.context.t('terms')),
- ]),
- ]),
- h('div.settings__info-link-item', [
- h('a', {
- href: 'https://metamask.io/attributions.html',
- target: '_blank',
- }, [
- h('span.settings__info-link', this.context.t('attributions')),
- ]),
- ]),
- // h('hr.settings__info-separator'),
- ])
- )
- }
-
- render () {
- return (
- h('div.settings__content', [
- h('div.settings__content-row', [
- h('div.settings__content-item.settings__content-item--without-height', [
- this.renderLogo(),
- h('div.settings__info-item', [
- h('div.settings__info-version-header', 'Nifty Wallet Version'),
- h('div.settings__info-version-number', this.state.version),
- ]),
- h('div.settings__info-item', [
- h(
- 'div.settings__info-about',
- this.context.t('builtInCalifornia')
- ),
- ]),
- ]),
- this.renderInfoLinks(),
- ]),
- ])
- )
- }
-}
-
-Info.propTypes = {
- tab: PropTypes.string,
- metamask: PropTypes.object,
- setCurrentCurrency: PropTypes.func,
- setRpcTarget: PropTypes.func,
- displayWarning: PropTypes.func,
- revealSeedConfirmation: PropTypes.func,
- warning: PropTypes.string,
- location: PropTypes.object,
- history: PropTypes.object,
- t: PropTypes.func,
-}
-
-Info.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = Info
diff --git a/ui/app/components/pages/settings/settings-tab/index.js b/ui/app/components/pages/settings/settings-tab/index.js
new file mode 100644
index 000000000..9fdaafd3f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.js
@@ -0,0 +1 @@
+export { default } from './settings-tab.container'
diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
new file mode 100644
index 000000000..76a0cec6f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -0,0 +1,51 @@
+.settings-tab {
+ &__error {
+ padding-bottom: 20px;
+ text-align: center;
+ color: $crimson;
+ }
+
+ &__rpc-save-button {
+ align-self: flex-end;
+ padding: 5px;
+ text-transform: uppercase;
+ color: $dusty-gray;
+ cursor: pointer;
+ }
+
+ &__rpc-save-button {
+ align-self: flex-end;
+ padding: 5px;
+ text-transform: uppercase;
+ color: $dusty-gray;
+ cursor: pointer;
+ }
+
+ &__button--red {
+ border-color: lighten($monzo, 10%);
+ color: $monzo;
+
+ &:active {
+ background: lighten($monzo, 55%);
+ border-color: $monzo;
+ }
+
+ &:hover {
+ border-color: $monzo;
+ }
+ }
+
+ &__button--orange {
+ border-color: lighten($ecstasy, 20%);
+ color: $ecstasy;
+
+ &:active {
+ background: lighten($ecstasy, 40%);
+ border-color: $ecstasy;
+ }
+
+ &:hover {
+ border-color: $ecstasy;
+ }
+ }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
new file mode 100644
index 000000000..53c4f16e0
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -0,0 +1,359 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import infuraCurrencies from '../../../../infura-conversion.json'
+import validUrl from 'valid-url'
+import { exportAsFile } from '../../../../util'
+import SimpleDropdown from '../../../dropdowns/simple-dropdown'
+import ToggleButton from 'react-toggle-button'
+import { REVEAL_SEED_ROUTE } from '../../../../routes'
+import locales from '../../../../../../app/_locales/index.json'
+import TextField from '../../../text-field'
+import Button from '../../../button'
+
+const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+ return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+})
+
+const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
+ return {
+ displayValue: `${code.toUpperCase()} - ${name}`,
+ key: code,
+ value: code,
+ }
+})
+
+const localeOptions = locales.map(locale => {
+ return {
+ displayValue: `${locale.name}`,
+ key: locale.code,
+ value: locale.code,
+ }
+})
+
+export default class SettingsTab extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ metamask: PropTypes.object,
+ setUseBlockie: PropTypes.func,
+ setHexDataFeatureFlag: PropTypes.func,
+ setCurrentCurrency: PropTypes.func,
+ setRpcTarget: PropTypes.func,
+ displayWarning: PropTypes.func,
+ revealSeedConfirmation: PropTypes.func,
+ setFeatureFlagToBeta: PropTypes.func,
+ showResetAccountConfirmationModal: PropTypes.func,
+ warning: PropTypes.string,
+ history: PropTypes.object,
+ isMascara: PropTypes.bool,
+ updateCurrentLocale: PropTypes.func,
+ currentLocale: PropTypes.string,
+ useBlockie: PropTypes.bool,
+ sendHexData: PropTypes.bool,
+ currentCurrency: PropTypes.string,
+ conversionDate: PropTypes.number,
+ }
+
+ state = {
+ newRpc: '',
+ }
+
+ renderCurrentConversion () {
+ const { t } = this.context
+ const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
+
+ return (
+
+
+
+
+ { this.renderInfoLinks() }
+
+ 
+
+
+
+
+
+ { t('metamaskVersion') }
+
+
+ { this.state.version }
+
+
+
+
+ { t('builtInCalifornia') }
+
+
+
+ )
+ }
+
+ renderCurrentLocale () {
+ const { t } = this.context
+ const { updateCurrentLocale, currentLocale } = this.props
+ const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+ const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+ return (
+
+ { t('currentConversion') }
+
+ { t('updatedWithDate', [Date(conversionDate)]) }
+
+
+
+
+
+ setCurrentCurrency(newCurrency)}
+ />
+
+
+
+ )
+ }
+
+ renderNewRpcUrl () {
+ const { t } = this.context
+ const { newRpc } = this.state
+
+ return (
+
+
+ { t('currentLanguage') }
+
+
+ { currentLocaleName }
+
+
+
+
+
+ updateCurrentLocale(newLocale)}
+ />
+
+
+
+ )
+ }
+
+ validateRpc (newRpc) {
+ const { setRpcTarget, displayWarning } = this.props
+
+ if (validUrl.isWebUri(newRpc)) {
+ setRpcTarget(newRpc)
+ } else {
+ const appendedRpc = `http://${newRpc}`
+
+ if (validUrl.isWebUri(appendedRpc)) {
+ displayWarning(this.context.t('uriErrorMsg'))
+ } else {
+ displayWarning(this.context.t('invalidRPC'))
+ }
+ }
+ }
+
+ renderStateLogs () {
+ const { t } = this.context
+ const { displayWarning } = this.props
+
+ return (
+
+ { t('newRPC') }
+
+
+
+
+ this.setState({ newRpc: e.target.value })}
+ onKeyPress={e => {
+ if (e.key === 'Enter') {
+ this.validateRpc(newRpc)
+ }
+ }}
+ fullWidth
+ margin="none"
+ />
+
+ {
+ e.preventDefault()
+ this.validateRpc(newRpc)
+ }}
+ >
+ { t('save') }
+
+
+
+ )
+ }
+
+ renderSeedWords () {
+ const { t } = this.context
+ const { history } = this.props
+
+ return (
+
+ { t('stateLogs') }
+
+ { t('stateLogsDescription') }
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ renderOldUI () {
+ const { t } = this.context
+ const { setFeatureFlagToBeta } = this.props
+
+ return (
+
+ { t('revealSeedWords') }
+
+
+
+
+
+
+
+
+ )
+ }
+
+ renderResetAccount () {
+ const { t } = this.context
+ const { showResetAccountConfirmationModal } = this.props
+
+ return (
+
+ { t('useOldUI') }
+
+
+
+
+
+
+
+
+ )
+ }
+
+ renderBlockieOptIn () {
+ const { useBlockie, setUseBlockie } = this.props
+
+ return (
+
+ { t('resetAccount') }
+
+
+
+
+
+
+
+
+ )
+ }
+
+ renderHexDataOptIn () {
+ const { t } = this.context
+ const { sendHexData, setHexDataFeatureFlag } = this.props
+
+ return (
+
+ { this.context.t('blockiesIdenticon') }
+
+
+
+
+ setUseBlockie(!value)}
+ activeLabel=""
+ inactiveLabel=""
+ />
+
+
+
+ )
+ }
+
+ render () {
+ const { warning, isMascara } = this.props
+
+ return (
+
+ { t('showHexData') }
+
+
+ { t('showHexDataDescription') }
+
+
+
+
+ setHexDataFeatureFlag(!value)}
+ activeLabel=""
+ inactiveLabel=""
+ />
+
+
+ { warning &&
+ )
+ }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
new file mode 100644
index 000000000..665b56f5c
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -0,0 +1,59 @@
+import SettingsTab from './settings-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {
+ setCurrentCurrency,
+ setRpcTarget,
+ displayWarning,
+ revealSeedConfirmation,
+ setUseBlockie,
+ updateCurrentLocale,
+ setFeatureFlag,
+ showModal,
+} from '../../../../actions'
+
+const mapStateToProps = state => {
+ const { appState: { warning }, metamask } = state
+ const {
+ currentCurrency,
+ conversionDate,
+ useBlockie,
+ featureFlags: { sendHexData } = {},
+ provider = {},
+ isMascara,
+ currentLocale,
+ } = metamask
+
+ return {
+ warning,
+ isMascara,
+ currentLocale,
+ currentCurrency,
+ conversionDate,
+ useBlockie,
+ sendHexData,
+ provider,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
+ setRpcTarget: newRpc => dispatch(setRpcTarget(newRpc)),
+ displayWarning: warning => dispatch(displayWarning(warning)),
+ revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
+ setUseBlockie: value => dispatch(setUseBlockie(value)),
+ updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
+ setFeatureFlagToBeta: () => {
+ return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+ },
+ setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
+ showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(SettingsTab)
diff --git a/ui/app/components/pages/settings/settings.component.js b/ui/app/components/pages/settings/settings.component.js
new file mode 100644
index 000000000..94a97bba1
--- /dev/null
+++ b/ui/app/components/pages/settings/settings.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route, matchPath } from 'react-router-dom'
+import TabBar from '../../tab-bar'
+import SettingsTab from './settings-tab'
+import InfoTab from './info-tab'
+import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes'
+
+export default class SettingsPage extends PureComponent {
+ static propTypes = {
+ location: PropTypes.object,
+ history: PropTypes.object,
+ t: PropTypes.func,
+ }
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ render () {
+ const { history, location } = this.props
+
+ return (
+ { warning }
}
+ { this.renderCurrentConversion() }
+ { this.renderCurrentLocale() }
+ { this.renderNewRpcUrl() }
+ { this.renderStateLogs() }
+ { this.renderSeedWords() }
+ { !isMascara && this.renderOldUI() }
+ { this.renderResetAccount() }
+ { this.renderBlockieOptIn() }
+ { this.renderHexDataOptIn() }
+
+ this.props.updateGas(updateData)} />
)
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 1163dcffc..434db81e5 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -48,7 +48,7 @@ export default class SendToRow extends Component {
return (
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
deleted file mode 100644
index a8945f22b..000000000
--- a/ui/app/components/pages/settings/settings.js
+++ /dev/null
@@ -1,371 +0,0 @@
-const { Component } = require('react')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const infuraCurrencies = require('../../../infura-conversion.json')
-const validUrl = require('valid-url')
-const { exportAsFile } = require('../../../util')
-const SimpleDropdown = require('../../dropdowns/simple-dropdown')
-const ToggleButton = require('react-toggle-button')
-const { REVEAL_SEED_ROUTE } = require('../../../routes')
-const locales = require('../../../../../app/_locales/index.json')
-
-const getInfuraCurrencyOptions = () => {
- const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
- return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
- })
-
- return sortedCurrencies.map(({ quote: { code, name } }) => {
- return {
- displayValue: `${code.toUpperCase()} - ${name}`,
- key: code,
- value: code,
- }
- })
-}
-
-const getLocaleOptions = () => {
- return locales.map((locale) => {
- return {
- displayValue: `${locale.name}`,
- key: locale.code,
- value: locale.code,
- }
- })
-}
-
-class Settings extends Component {
- constructor (props) {
- super(props)
-
- this.state = {
- newRpc: '',
- }
- }
-
- renderBlockieOptIn () {
- const { metamask: { useBlockie }, setUseBlockie } = this.props
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('span', this.context.t('blockiesIdenticon')),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h(ToggleButton, {
- value: useBlockie,
- onToggle: (value) => setUseBlockie(!value),
- activeLabel: '',
- inactiveLabel: '',
- }),
- ]),
- ]),
- ])
- }
-
- renderCurrentConversion () {
- const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('span', this.context.t('currentConversion')),
- h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h(SimpleDropdown, {
- placeholder: this.context.t('selectCurrency'),
- options: getInfuraCurrencyOptions(),
- selectedOption: currentCurrency,
- onSelect: newCurrency => setCurrentCurrency(newCurrency),
- }),
- ]),
- ]),
- ])
- }
-
- renderCurrentLocale () {
- const { updateCurrentLocale, currentLocale } = this.props
- const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
- const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('span', 'Current Language'),
- h('span.settings__content-description', `${currentLocaleName}`),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h(SimpleDropdown, {
- placeholder: 'Select Locale',
- options: getLocaleOptions(),
- selectedOption: currentLocale,
- onSelect: async (newLocale) => {
- updateCurrentLocale(newLocale)
- },
- }),
- ]),
- ]),
- ])
- }
-
- renderCurrentProvider () {
- const { metamask: { provider = {} } } = this.props
- let title, value, color
-
- switch (provider.type) {
-
- case 'mainnet':
- title = this.context.t('currentNetwork')
- value = this.context.t('mainnet')
- color = '#038789'
- break
-
- case 'ropsten':
- title = this.context.t('currentNetwork')
- value = this.context.t('ropsten')
- color = '#e91550'
- break
-
- case 'kovan':
- title = this.context.t('currentNetwork')
- value = this.context.t('kovan')
- color = '#690496'
- break
-
- case 'rinkeby':
- title = this.context.t('currentNetwork')
- value = this.context.t('rinkeby')
- color = '#ebb33f'
- break
-
- case 'poa':
- title = this.context.t('currentNetwork')
- value = this.context.t('poa')
- color = '#5c34a2'
- break
-
- default:
- title = this.context.t('currentRpc')
- value = provider.rpcTarget
- }
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', title),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('div.settings__provider-wrapper', [
- h('div.settings__provider-icon', { style: { background: color } }),
- h('div', value),
- ]),
- ]),
- ]),
- ])
- }
-
- renderNewRpcUrl () {
- return (
- h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('span', this.context.t('newRPC')),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('input.settings__input', {
- placeholder: this.context.t('newRPC'),
- onChange: event => this.setState({ newRpc: event.target.value }),
- onKeyPress: event => {
- if (event.key === 'Enter') {
- this.validateRpc(this.state.newRpc)
- }
- },
- }),
- h('div.settings__rpc-save-button', {
- onClick: event => {
- event.preventDefault()
- this.validateRpc(this.state.newRpc)
- },
- }, this.context.t('save')),
- ]),
- ]),
- ])
- )
- }
-
- validateRpc (newRpc) {
- const { setRpcTarget, displayWarning } = this.props
-
- if (validUrl.isWebUri(newRpc)) {
- setRpcTarget(newRpc)
- } else {
- const appendedRpc = `http://${newRpc}`
-
- if (validUrl.isWebUri(appendedRpc)) {
- displayWarning(this.context.t('uriErrorMsg'))
- } else {
- displayWarning(this.context.t('invalidRPC'))
- }
- }
- }
-
- renderStateLogs () {
- return (
- h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('div', this.context.t('stateLogs')),
- h(
- 'div.settings__content-description',
- this.context.t('stateLogsDescription')
- ),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button', {
- onClick (event) {
- window.logStateString((err, result) => {
- if (err) {
- this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
- } else {
- exportAsFile('Nifty Wallet State Logs.json', result)
- }
- })
- },
- }, this.context.t('downloadStateLogs')),
- ]),
- ]),
- ])
- )
- }
-
- renderSeedWords () {
- const { history } = this.props
-
- return (
- h('div.settings__content-row', [
- h('div.settings__content-item', this.context.t('revealSeedWords')),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--red', {
- onClick: event => {
- event.preventDefault()
- history.push(REVEAL_SEED_ROUTE)
- },
- }, this.context.t('revealSeedWords')),
- ]),
- ]),
- ])
- )
- }
-
- renderOldUI () {
- const { setFeatureFlagToBeta } = this.props
-
- return (
- h('div.settings__content-row', [
- h('div.settings__content-item', this.context.t('useOldUI')),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--orange', {
- onClick (event) {
- event.preventDefault()
- setFeatureFlagToBeta()
- },
- }, this.context.t('useOldUI')),
- ]),
- ]),
- ])
- )
- }
-
- renderResetAccount () {
- const { showResetAccountConfirmationModal } = this.props
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', this.context.t('resetAccount')),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--orange', {
- onClick (event) {
- event.preventDefault()
- showResetAccountConfirmationModal()
- },
- }, this.context.t('resetAccount')),
- ]),
- ]),
- ])
- }
-
- render () {
- const { warning, isMascara } = this.props
-
- return (
- h('div.settings__content', [
- warning && h('div.settings__error', warning),
- this.renderCurrentConversion(),
- this.renderCurrentLocale(),
- // this.renderCurrentProvider(),
- this.renderNewRpcUrl(),
- this.renderStateLogs(),
- this.renderSeedWords(),
- !isMascara && this.renderOldUI(),
- this.renderResetAccount(),
- this.renderBlockieOptIn(),
- ])
- )
- }
-}
-
-Settings.propTypes = {
- metamask: PropTypes.object,
- setUseBlockie: PropTypes.func,
- setCurrentCurrency: PropTypes.func,
- setRpcTarget: PropTypes.func,
- displayWarning: PropTypes.func,
- revealSeedConfirmation: PropTypes.func,
- setFeatureFlagToBeta: PropTypes.func,
- showResetAccountConfirmationModal: PropTypes.func,
- warning: PropTypes.string,
- history: PropTypes.object,
- isMascara: PropTypes.bool,
- updateCurrentLocale: PropTypes.func,
- currentLocale: PropTypes.string,
- t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
- return {
- metamask: state.metamask,
- warning: state.appState.warning,
- isMascara: state.metamask.isMascara,
- currentLocale: state.metamask.currentLocale,
- }
-}
-
-const mapDispatchToProps = dispatch => {
- return {
- setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
- setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
- displayWarning: warning => dispatch(actions.displayWarning(warning)),
- revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
- setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
- updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
- setFeatureFlagToBeta: () => {
- return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
- },
- showResetAccountConfirmationModal: () => {
- return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
- },
- }
-}
-
-Settings.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(Settings)
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 8b0764145..58e54a89d 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -14,6 +14,7 @@
align-self: stretch;
justify-content: center;
flex: 1 0 auto;
+ height: 100vh;
}
&__title {
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
deleted file mode 100644
index f16fcb1c7..000000000
--- a/ui/app/components/pending-msg-details.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-
-const AccountPanel = require('./account-panel')
-
-PendingMsgDetails.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(PendingMsgDetails)
-
-
-inherits(PendingMsgDetails, Component)
-function PendingMsgDetails () {
- Component.call(this)
-}
-
-PendingMsgDetails.prototype.render = function () {
- var state = this.props
- var msgData = state.txData
-
- var msgParams = msgData.msgParams || {}
- var address = msgParams.from || state.selectedAddress
- var identity = state.identities[address] || { address: address }
- var account = state.accounts[address] || { address: address }
-
- return (
- h('div', {
- key: msgData.id,
- style: {
- margin: '10px 20px',
- },
- }, [
-
- // account that will sign
- h(AccountPanel, {
- showFullAddress: true,
- identity: identity,
- account: account,
- imageifyIdenticons: state.imageifyIdenticons,
- }),
-
- // message data
- h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
- h('.flex-column.flex-space-between', [
- h('label.font-small.allcaps', this.context.t('message')),
- h('span.font-small', msgParams.data),
- ]),
- ]),
-
- ])
- )
-}
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
deleted file mode 100644
index 21a7864e4..000000000
--- a/ui/app/components/pending-msg.js
+++ /dev/null
@@ -1,73 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-msg-details')
-const connect = require('react-redux').connect
-
-PendingMsg.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(PendingMsg)
-
-
-inherits(PendingMsg, Component)
-function PendingMsg () {
- Component.call(this)
-}
-
-PendingMsg.prototype.render = function () {
- var state = this.props
- var msgData = state.txData
-
- return (
-
- h('div', {
- key: msgData.id,
- style: {
- maxWidth: '350px',
- },
- }, [
-
- // header
- h('h3', {
- style: {
- fontWeight: 'bold',
- textAlign: 'center',
- },
- }, this.context.t('signMessage')),
-
- h('.error', {
- style: {
- margin: '10px',
- },
- }, [
- this.context.t('signNotice'),
- h('a', {
- href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
- style: { color: 'rgb(247, 134, 28)' },
- onClick: (event) => {
- event.preventDefault()
- const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
- global.platform.openWindow({ url })
- },
- }, this.context.t('readMore')),
- ]),
-
- // message details
- h(PendingTxDetails, state),
-
- // sign + cancel
- h('.flex-row.flex-space-around', [
- h('button', {
- onClick: state.cancelMessage,
- }, this.context.t('cancel')),
- h('button', {
- onClick: state.signMessage,
- }, this.context.t('sign')),
- ]),
- ])
-
- )
-}
diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
index 6c202141e..4f98df9b6 100644
--- a/ui/app/components/selected-account/selected-account.component.js
+++ b/ui/app/components/selected-account/selected-account.component.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import copyToClipboard from 'copy-to-clipboard'
-import { addressSlicer } from '../../util'
+import { addressSlicer, checksumAddress } from '../../util'
-const Tooltip = require('../tooltip-v2.js')
+const Tooltip = require('../tooltip-v2.js').default
class SelectedAccount extends Component {
state = {
@@ -22,6 +22,7 @@ class SelectedAccount extends Component {
render () {
const { t } = this.context
const { selectedAddress, selectedIdentity } = this.props
+ const checksummedAddress = checksumAddress(selectedAddress)
return (
history.push(DEFAULT_ROUTE)}
+ />
+ matchPath(location.pathname, { path: key, exact: true })}
+ onSelect={key => history.push(key)}
+ />
+
+
@@ -34,14 +35,14 @@ class SelectedAccount extends Component {
onClick={() => {
this.setState({ copied: true })
setTimeout(() => this.setState({ copied: false }), 3000)
- copyToClipboard(selectedAddress)
+ copyToClipboard(checksummedAddress)
}}
>
diff --git a/ui/app/components/selected-account/tests/selected-account-component.test.js b/ui/app/components/selected-account/tests/selected-account-component.test.js
new file mode 100644
index 000000000..78a94d1c8
--- /dev/null
+++ b/ui/app/components/selected-account/tests/selected-account-component.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import assert from 'assert'
+import { render } from 'enzyme'
+import SelectedAccount from '../selected-account.component'
+
+describe('SelectedAccount Component', () => {
+ it('should render checksummed address', () => {
+ const wrapper = render(
{ selectedIdentity.name }
- { addressSlicer(selectedAddress) }
+ { addressSlicer(checksummedAddress) }
@@ -201,6 +201,7 @@ export default class SendTransactionScreen extends PersistentForm {
this.updateGas(updateData)}
scanQrCode={_ => this.props.scanQrCode()}
+ showHexData={showHexData}
/>
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 41735de64..6ee8de9aa 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -18,6 +18,7 @@ import {
getSelectedTokenToFiatRate,
getSendAmount,
getSendEditingTransactionId,
+ getSendHexDataFeatureFlagState,
getSendFromObject,
getSendTo,
getTokenBalance,
@@ -64,6 +65,7 @@ function mapStateToProps (state) {
recentBlocks: getRecentBlocks(state),
selectedAddress: getSelectedAddress(state),
selectedToken: getSelectedToken(state),
+ showHexData: getSendHexDataFeatureFlagState(state),
to: getSendTo(state),
tokenBalance: getTokenBalance(state),
tokenContract: getSelectedTokenContract(state),
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index ab3f6d34b..22e379693 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -34,6 +34,7 @@ const selectors = {
getSelectedTokenToFiatRate,
getSendAmount,
getSendHexData,
+ getSendHexDataFeatureFlagState,
getSendEditingTransactionId,
getSendErrors,
getSendFrom,
@@ -216,6 +217,10 @@ function getSendHexData (state) {
return state.metamask.send.data
}
+function getSendHexDataFeatureFlagState (state) {
+ return state.metamask.featureFlags.sendHexData
+}
+
function getSendEditingTransactionId (state) {
return state.metamask.send.editingTransactionId
}
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index 6194ec508..d2c2ee926 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -47,6 +47,7 @@ describe('Send Component', function () {
recentBlocks={['mockBlock']}
selectedAddress={'mockSelectedAddress'}
selectedToken={'mockSelectedToken'}
+ showHexData={true}
tokenBalance={'mockTokenBalance'}
tokenContract={'mockTokenContract'}
updateAndSetGasTotal={propsMethodSpies.updateAndSetGasTotal}
@@ -328,5 +329,9 @@ describe('Send Component', function () {
}
)
})
+
+ it('should pass showHexData to SendContent', () => {
+ assert.equal(wrapper.find(SendContent).props().showHexData, true)
+ })
})
})
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
index 57e332780..85eec6a53 100644
--- a/ui/app/components/send/tests/send-container.test.js
+++ b/ui/app/components/send/tests/send-container.test.js
@@ -39,6 +39,7 @@ proxyquire('../send.container.js', {
getSelectedToken: (s) => `mockSelectedToken:${s}`,
getSelectedTokenContract: (s) => `mockTokenContract:${s}`,
getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`,
+ getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
getSendAmount: (s) => `mockAmount:${s}`,
getSendTo: (s) => `mockTo:${s}`,
getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
@@ -73,6 +74,7 @@ describe('send container', () => {
recentBlocks: 'mockRecentBlocks:mockState',
selectedAddress: 'mockSelectedAddress:mockState',
selectedToken: 'mockSelectedToken:mockState',
+ showHexData: 'mockSendHexDataFeatureFlagState:mockState',
to: 'mockTo:mockState',
tokenBalance: 'mockTokenBalance:mockState',
tokenContract: 'mockTokenContract:mockState',
diff --git a/ui/app/components/send/tests/send-selectors-test-data.js b/ui/app/components/send/tests/send-selectors-test-data.js
index 8f9c19314..8b939dadb 100644
--- a/ui/app/components/send/tests/send-selectors-test-data.js
+++ b/ui/app/components/send/tests/send-selectors-test-data.js
@@ -2,7 +2,7 @@ module.exports = {
'metamask': {
'isInitialized': true,
'isUnlocked': true,
- 'featureFlags': {'betaUI': true},
+ 'featureFlags': {'betaUI': true, 'sendHexData': true},
'rpcTarget': 'https://rawtestrpc.metamask.io/',
'identities': {
'0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
diff --git a/ui/app/components/send/tests/send-selectors.test.js b/ui/app/components/send/tests/send-selectors.test.js
index 218da656b..1a47cd209 100644
--- a/ui/app/components/send/tests/send-selectors.test.js
+++ b/ui/app/components/send/tests/send-selectors.test.js
@@ -31,6 +31,7 @@ const {
getSendFrom,
getSendFromBalance,
getSendFromObject,
+ getSendHexDataFeatureFlagState,
getSendMaxModeState,
getSendTo,
getSendToAccounts,
@@ -379,6 +380,15 @@ describe('send selectors', () => {
})
})
+ describe('getSendHexDataFeatureFlagState()', () => {
+ it('should return the sendHexData feature flag state', () => {
+ assert.deepEqual(
+ getSendHexDataFeatureFlagState(mockState),
+ true
+ )
+ })
+ })
+
describe('getSendFrom()', () => {
it('should return the send.from', () => {
assert.deepEqual(
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index a97393b8f..0ab0413be 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -1,5 +1,5 @@
.sender-to-recipient {
- &__container {
+ &--default {
width: 100%;
display: flex;
flex-direction: row;
@@ -8,67 +8,113 @@
position: relative;
flex: 0 0 auto;
height: 42px;
- }
- &__tooltip-wrapper {
- min-width: 0;
- }
+ .sender-to-recipient {
+ &__tooltip-wrapper {
+ min-width: 0;
+ }
- &__tooltip-container {
- max-width: 100%;
- }
+ &__tooltip-container {
+ max-width: 100%;
+ }
- &__sender,
- &__recipient {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex: 1;
- padding: 0 16px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ &__party {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ padding: 0 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
- &__sender {
- padding-right: 30px;
- cursor: pointer;
- }
+ &--sender {
+ padding-right: 30px;
+ cursor: pointer;
+ }
- &__recipient {
- padding-left: 30px;
- border-left: 1px solid $geyser;
+ &--recipient {
+ padding-left: 30px;
+ border-left: 1px solid $geyser;
- &--with-address {
- cursor: pointer;
+ &-with-address {
+ cursor: pointer;
+ }
+ }
+ }
+
+ &__arrow-container {
+ position: absolute;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__arrow-circle {
+ background: $white;
+ padding: 5px;
+ border: 1px solid $geyser;
+ border-radius: 20px;
+ height: 32px;
+ width: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &__name {
+ padding-left: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: .875rem;
+ }
}
}
- &__arrow-container {
- position: absolute;
- height: 100%;
+ &--cards {
+ width: 100%;
display: flex;
- align-items: center;
+ flex-direction: row;
justify-content: center;
- }
+ position: relative;
+ flex: 0 0 auto;
- &__arrow-circle {
- background: $white;
- padding: 5px;
- border: 1px solid $geyser;
- border-radius: 20px;
- height: 32px;
- width: 32px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+ .sender-to-recipient {
+ &__party {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ border-radius: 4px;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ background: $white;
+ cursor: pointer;
+ min-width: 0;
+ color: $dusty-gray;
+ }
- &__name {
- padding-left: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: .875rem;
+ &__tooltip-wrapper {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: .5rem;
+ }
+
+ &__arrow-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
}
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index cae173b56..61f77224d 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -1,16 +1,30 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
import Identicon from '../identicon'
import Tooltip from '../tooltip-v2'
import copyToClipboard from 'copy-to-clipboard'
+import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
-export default class SenderToRecipient extends Component {
+const variantHash = {
+ [DEFAULT_VARIANT]: 'sender-to-recipient--default',
+ [CARDS_VARIANT]: 'sender-to-recipient--cards',
+}
+
+export default class SenderToRecipient extends PureComponent {
static propTypes = {
senderName: PropTypes.string,
senderAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientAddress: PropTypes.string,
t: PropTypes.func,
+ variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT]),
+ addressOnly: PropTypes.bool,
+ assetImage: PropTypes.string,
+ }
+
+ static defaultProps = {
+ variant: DEFAULT_VARIANT,
}
static contextTypes = {
@@ -22,24 +36,63 @@ export default class SenderToRecipient extends Component {
recipientAddressCopied: false,
}
+ renderSenderIdenticon () {
+ return !this.props.addressOnly && (
+
+
+ )
+ }
+
+ renderSenderAddress () {
+ const { t } = this.context
+ const { senderName, senderAddress, addressOnly } = this.props
+
+ return (
+
+ { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+
+
+
+ )
+ }
+
renderRecipientWithAddress () {
const { t } = this.context
- const { recipientName, recipientAddress } = this.props
+ const { recipientName, recipientAddress, addressOnly } = this.props
return (
{
this.setState({ recipientAddressCopied: true })
copyToClipboard(recipientAddress)
}}
>
- this.setState({ recipientAddressCopied: false })}
>
-
-
+ { this.renderRecipientIdenticon() }
- { recipientName || this.context.t('newContract') }
+
@@ -57,46 +114,25 @@ export default class SenderToRecipient extends Component {
renderRecipientWithoutAddress () {
return (
-
+ {
+ addressOnly
+ ? `${t('to')}: ${recipientAddress}`
+ : (recipientName || this.context.t('newContract'))
+ }
-
-
+
+ { !this.props.addressOnly && }
+
)
}
- render () {
- const { t } = this.context
- const { senderName, senderAddress, recipientAddress } = this.props
-
- return (
-
{ this.context.t('newContract') }
-
{
- this.setState({ senderAddressCopied: true })
- copyToClipboard(senderAddress)
- }}
- >
- this.setState({ senderAddressCopied: false })}
- >
-
+ renderArrow () {
+ return this.props.variant === CARDS_VARIANT
+ ? (
+
![]()
+ )
+ }
+
+ render () {
+ const { senderAddress, recipientAddress, variant } = this.props
+
+ return (
+
-
-
- { senderName }
-
-
+ 
+ ) : (
+
{
+ this.setState({ senderAddressCopied: true })
+ copyToClipboard(senderAddress)
+ }}
+ >
+ { this.renderSenderIdenticon() }
+ { this.renderSenderAddress() }
+
+ { this.renderArrow() }
{
recipientAddress
? this.renderRecipientWithAddress()
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
new file mode 100644
index 000000000..166228932
--- /dev/null
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js
@@ -0,0 +1,3 @@
+// Component design variants
+export const DEFAULT_VARIANT = 'DEFAULT_VARIANT'
+export const CARDS_VARIANT = 'CARDS_VARIANT'
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 4ac54525d..13e1e28e2 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -9,6 +9,8 @@ const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions
const { isValidAddress } = require('../util')
const SimpleDropdown = require('./dropdowns/simple-dropdown')
+import Button from './button'
+
function mapStateToProps (state) {
const {
coinOptions,
@@ -242,8 +244,10 @@ ShapeshiftForm.prototype.render = function () {
]),
- !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
- className: btnClass,
+ !depositAddress && h(Button, {
+ type: 'primary',
+ large: true,
+ className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
disabled: !token,
onClick: () => this.onBuyWithShapeShift(),
}, [this.context.t('buy')]),
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 395c1e217..7fecdf192 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -35,12 +35,13 @@ function ShiftListItem () {
}
ShiftListItem.prototype.render = function () {
- return h('div.tx-list-item.tx-list-clickable', {
+ return h('div.transaction-list-item.tx-list-clickable', {
style: {
paddingTop: '20px',
paddingBottom: '20px',
justifyContent: 'space-around',
alignItems: 'center',
+ flexDirection: 'row',
},
}, [
h('div', {
diff --git a/ui/app/components/sidebars/index.js b/ui/app/components/sidebars/index.js
new file mode 100644
index 000000000..732925f69
--- /dev/null
+++ b/ui/app/components/sidebars/index.js
@@ -0,0 +1 @@
+export { default } from './sidebar.component'
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
new file mode 100644
index 000000000..5ab0664df
--- /dev/null
+++ b/ui/app/components/sidebars/index.scss
@@ -0,0 +1,74 @@
+.sidebar-right-enter {
+ transition: transform 300ms ease-in-out;
+ transform: translateX(-100%);
+}
+
+.sidebar-right-enter.sidebar-right-enter-active {
+ transition: transform 300ms ease-in-out;
+ transform: translateX(0%);
+}
+
+.sidebar-right-leave {
+ transition: transform 200ms ease-out;
+ transform: translateX(0%);
+}
+
+.sidebar-right-leave.sidebar-right-leave-active {
+ transition: transform 200ms ease-out;
+ transform: translateX(-100%);
+}
+
+.sidebar-left-enter {
+ transition: transform 300ms ease-in-out;
+ transform: translateX(100%);
+}
+
+.sidebar-left-enter.sidebar-left-enter-active {
+ transition: transform 300ms ease-in-out;
+ transform: translateX(0%);
+}
+
+.sidebar-left-leave {
+ transition: transform 200ms ease-out;
+ transform: translateX(0%);
+}
+
+.sidebar-left-leave.sidebar-left-leave-active {
+ transition: transform 200ms ease-out;
+ transform: translateX(100%);
+}
+
+.sidebar-left {
+ flex: 1 0 230px;
+ background: rgb(250, 250, 250);
+ z-index: $sidebar-z-index;
+ position: fixed;
+ left: 15%;
+ right: 0;
+ bottom: 0;
+ opacity: 1;
+ visibility: visible;
+ will-change: transform;
+ overflow-y: auto;
+ box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+ width: 85%;
+ height: 100%;
+
+ @media screen and (min-width: 769px) {
+ width: 408px;
+ left: calc(100% - 408px);
+ }
+}
+
+.sidebar-overlay {
+ z-index: $sidebar-overlay-z-index;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 1;
+ visibility: visible;
+ background-color: rgba(0, 0, 0, .3);
+}
\ No newline at end of file
diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js
new file mode 100644
index 000000000..57cdd7111
--- /dev/null
+++ b/ui/app/components/sidebars/sidebar.component.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import WalletView from '../wallet-view'
+import { WALLET_VIEW_SIDEBAR } from './sidebar.constants'
+
+export default class Sidebar extends Component {
+
+ static propTypes = {
+ sidebarOpen: PropTypes.bool,
+ hideSidebar: PropTypes.func,
+ transitionName: PropTypes.string,
+ type: PropTypes.string,
+ };
+
+ renderOverlay () {
+ return this.props.hideSidebar()} />
+ }
+
+ renderSidebarContent () {
+ const { type } = this.props
+
+ switch (type) {
+ case WALLET_VIEW_SIDEBAR:
+ return {
event.preventDefault()
@@ -26,6 +26,13 @@ Tab.propTypes = {
onClick: PropTypes.func,
isActive: PropTypes.bool,
tabIndex: PropTypes.number,
+ className: PropTypes.string,
+ activeClassName: PropTypes.string,
+}
+
+Tab.defaultProps = {
+ className: 'tab',
+ activeClassName: 'tab--active',
}
export default Tab
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
deleted file mode 100644
index 7498f403c..000000000
--- a/ui/app/components/token-balance.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const TokenTracker = require('eth-token-watcher')
-const connect = require('react-redux').connect
-const selectors = require('../selectors')
-const log = require('loglevel')
-
-function mapStateToProps (state) {
- return {
- userAddress: selectors.getSelectedAddress(state),
- }
-}
-
-module.exports = connect(mapStateToProps)(TokenBalance)
-
-
-inherits(TokenBalance, Component)
-function TokenBalance () {
- this.state = {
- string: '',
- symbol: '',
- isLoading: true,
- error: null,
- }
- Component.call(this)
-}
-
-TokenBalance.prototype.render = function () {
- const state = this.state
- const { symbol, string, isLoading } = state
- const { balanceOnly } = this.props
-
- return isLoading
- ? h('span', '')
- : h('span.token-balance', [
- h('span.hide-text-overflow.token-balance__amount', string),
- !balanceOnly && h('span.token-balance__symbol', symbol),
- ])
-}
-
-TokenBalance.prototype.componentDidMount = function () {
- this.createFreshTokenTracker()
-}
-
-TokenBalance.prototype.createFreshTokenTracker = function () {
- if (this.tracker) {
- // Clean up old trackers when refreshing:
- this.tracker.stop()
- this.tracker.removeListener('update', this.balanceUpdater)
- this.tracker.removeListener('error', this.showError)
- }
-
- if (!global.ethereumProvider) return
- const { userAddress, token } = this.props
-
- this.tracker = new TokenTracker({
- userAddress,
- provider: global.ethereumProvider,
- tokens: [token],
- pollingInterval: 8000,
- })
-
-
- // Set up listener instances for cleaning up
- this.balanceUpdater = this.updateBalance.bind(this)
- this.showError = error => {
- this.setState({ error, isLoading: false })
- }
- this.tracker.on('update', this.balanceUpdater)
- this.tracker.on('error', this.showError)
-
- this.tracker.updateBalances()
- .then(() => {
- this.updateBalance(this.tracker.serialize())
- })
- .catch((reason) => {
- log.error(`Problem updating balances`, reason)
- this.setState({ isLoading: false })
- })
-}
-
-TokenBalance.prototype.componentDidUpdate = function (nextProps) {
- const {
- userAddress: oldAddress,
- token: { address: oldTokenAddress },
- } = this.props
- const {
- userAddress: newAddress,
- token: { address: newTokenAddress },
- } = nextProps
-
- if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
- if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
-
- this.setState({ isLoading: true })
- this.createFreshTokenTracker()
-}
-
-TokenBalance.prototype.updateBalance = function (tokens = []) {
- if (!this.tracker.running) {
- return
- }
-
- const [{ string, symbol }] = tokens
-
- this.setState({
- string,
- symbol,
- isLoading: false,
- })
-}
-
-TokenBalance.prototype.componentWillUnmount = function () {
- if (!this.tracker) return
- this.tracker.stop()
- this.tracker.removeListener('update', this.balanceUpdater)
- this.tracker.removeListener('error', this.showError)
-}
-
diff --git a/ui/app/components/token-balance/index.js b/ui/app/components/token-balance/index.js
new file mode 100644
index 000000000..f7da15cf8
--- /dev/null
+++ b/ui/app/components/token-balance/index.js
@@ -0,0 +1 @@
+export { default } from './token-balance.container'
diff --git a/ui/app/components/token-balance/token-balance.component.js b/ui/app/components/token-balance/token-balance.component.js
new file mode 100644
index 000000000..2b4f73980
--- /dev/null
+++ b/ui/app/components/token-balance/token-balance.component.js
@@ -0,0 +1,23 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TokenBalance extends PureComponent {
+ static propTypes = {
+ string: PropTypes.string,
+ symbol: PropTypes.string,
+ error: PropTypes.string,
+ className: PropTypes.string,
+ withSymbol: PropTypes.bool,
+ }
+
+ render () {
+ const { className, string, withSymbol, symbol } = this.props
+
+ return (
+
+ Test
+ ,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+ assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+ assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
+ })
+
+ it('should render components properly', () => {
+ const wrapper = shallow(
+
+
+ ,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+ assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+ assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
+ })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
new file mode 100644
index 000000000..c11ff8efa
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TransactionBreakdownRow extends PureComponent {
+ static propTypes = {
+ title: PropTypes.string,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ }
+
+ render () {
+ const { title, children, className } = this.props
+
+ return (
+ ) -> String
function formatDate (date) {
- return vreme.format(new Date(date), 'March 16 2014 14:30')
+ return vreme.format(new Date(date), '3/16/2014 at 14:30')
}
var valueTable = {
diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js
index bc927ee65..c6a7d0bf1 100644
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@@ -20,10 +20,10 @@ const getMessage = (locale, key, substitutions) => {
let phrase = entry.message
// perform substitutions
if (substitutions && substitutions.length) {
- phrase = phrase.replace(/\$1/g, substitutions[0])
- if (substitutions.length > 1) {
- phrase = phrase.replace(/\$2/g, substitutions[1])
- }
+ substitutions.forEach((substitution, index) => {
+ const regex = new RegExp(`\\$${index + 1}`, 'g')
+ phrase = phrase.replace(regex, substitution)
+ })
}
return phrase
}
+
+ { sidebarOpen ? this.renderSidebarContent() : null }
+
+ { sidebarOpen ? this.renderOverlay() : null }
+
+ )
+ }
+
+}
diff --git a/ui/app/components/sidebars/sidebar.constants.js b/ui/app/components/sidebars/sidebar.constants.js
new file mode 100644
index 000000000..1613a8245
--- /dev/null
+++ b/ui/app/components/sidebars/sidebar.constants.js
@@ -0,0 +1 @@
+export const WALLET_VIEW_SIDEBAR = 'wallet-view'
diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/sidebars/tests/sidebars-component.test.js
new file mode 100644
index 000000000..e2d77518a
--- /dev/null
+++ b/ui/app/components/sidebars/tests/sidebars-component.test.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import Sidebar from '../sidebar.component.js'
+
+import WalletView from '../../wallet-view'
+
+const propsMethodSpies = {
+ hideSidebar: sinon.spy(),
+}
+
+describe('Sidebar Component', function () {
+ let wrapper
+
+ beforeEach(() => {
+ wrapper = shallow(
+ { string + (withSymbol ? ` ${symbol}` : '') }
+
+ )
+ }
+}
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
similarity index 72%
rename from ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
rename to ui/app/components/token-balance/token-balance.container.js
index bc1289ce1..adc001f83 100644
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
+++ b/ui/app/components/token-balance/token-balance.container.js
@@ -1,8 +1,8 @@
import { connect } from 'react-redux'
import { compose } from 'recompose'
-import withTokenTracker from '../../../../helpers/with-token-tracker'
+import withTokenTracker from '../../higher-order-components/with-token-tracker'
import TokenBalance from './token-balance.component'
-import selectors from '../../../../selectors'
+import selectors from '../../selectors'
const mapStateToProps = state => {
return {
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index f42af7868..edf8b2661 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -18,7 +18,7 @@ function mapStateToProps (state) {
userAddress: selectors.getSelectedAddress(state),
contractExchangeRates: state.metamask.contractExchangeRates,
conversionRate: state.metamask.conversionRate,
- sidebarOpen: state.appState.sidebarOpen,
+ sidebarOpen: state.appState.sidebar.isOpen,
}
}
@@ -56,8 +56,8 @@ TokenCell.prototype.render = function () {
sidebarOpen,
currentCurrency,
// userAddress,
+ image,
} = props
-
let currentTokenToFiatRate
let currentTokenInFiat
let formattedFiat = ''
@@ -97,6 +97,7 @@ TokenCell.prototype.render = function () {
diameter: 50,
address,
network,
+ image,
}),
h('div.token-list-item__balance-ellipsis', null, [
diff --git a/ui/app/components/token-currency-display/index.js b/ui/app/components/token-currency-display/index.js
new file mode 100644
index 000000000..6065cae1f
--- /dev/null
+++ b/ui/app/components/token-currency-display/index.js
@@ -0,0 +1 @@
+export { default } from './token-currency-display.component'
diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
new file mode 100644
index 000000000..957aec376
--- /dev/null
+++ b/ui/app/components/token-currency-display/token-currency-display.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../currency-display/currency-display.component'
+import { getTokenData } from '../../helpers/transactions.util'
+import { calcTokenAmount } from '../../token-util'
+
+export default class TokenCurrencyDisplay extends PureComponent {
+ static propTypes = {
+ transactionData: PropTypes.string,
+ token: PropTypes.object,
+ }
+
+ state = {
+ displayValue: '',
+ }
+
+ componentDidMount () {
+ this.setDisplayValue()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { transactionData } = this.props
+ const { transactionData: prevTransactionData } = prevProps
+
+ if (transactionData !== prevTransactionData) {
+ this.setDisplayValue()
+ }
+ }
+
+ setDisplayValue () {
+ const { transactionData: data, token } = this.props
+ const { decimals = '', symbol = '' } = token
+ const tokenData = getTokenData(data)
+
+ let displayValue
+
+ if (tokenData.params && tokenData.params.length === 2) {
+ const tokenValue = tokenData.params[1].value
+ const tokenAmount = calcTokenAmount(tokenValue, decimals)
+ displayValue = `${tokenAmount} ${symbol}`
+ }
+
+ this.setState({ displayValue })
+ }
+
+ render () {
+ return (
+
+ {children}
+
+ )
+ }
+
+ return (
+
+
+ {children}
+
+
+ )
+ }
}
diff --git a/ui/app/components/transaction-action/index.js b/ui/app/components/transaction-action/index.js
new file mode 100644
index 000000000..a6e9097f1
--- /dev/null
+++ b/ui/app/components/transaction-action/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-action.component'
diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
new file mode 100644
index 000000000..218792847
--- /dev/null
+++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
@@ -0,0 +1,112 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TransactionAction from '../transaction-action.component'
+
+describe('TransactionAction Component', () => {
+ const tOrDefault = key => key
+ global.eth = {
+ getCode: sinon.stub().callsFake(address => {
+ console.log('CALLED')
+ const code = address === 'approveAddress' ? 'contract' : '0x'
+ return Promise.resolve(code)
+ }),
+ }
+
+ describe('Outgoing transaction', () => {
+ it('should render -- when methodData is still fetching', () => {
+ const methodData = { data: {}, done: false, error: null }
+ const transaction = {
+ id: 1,
+ status: 'confirmed',
+ submittedTime: 1534045442919,
+ time: 1534045440641,
+ txParams: {
+ from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x96',
+ to: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+ { (done && transactionAction) || '--' }
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/transaction-activity-log/index.js
new file mode 100644
index 000000000..a33da15a3
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log.container'
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
new file mode 100644
index 000000000..2324d44b1
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -0,0 +1,63 @@
+.transaction-activity-log {
+ &__card {
+ background: $white;
+ height: 100%;
+ }
+
+ &__activities-container {
+ padding-top: 8px;
+ }
+
+ &__activity {
+ padding: 4px 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 6px;
+ border-right: 1px solid $scorpion;
+ }
+
+ &:first-child::after {
+ height: 50%;
+ top: 50%;
+ }
+
+ &:last-child::after {
+ height: 50%;
+ }
+ }
+
+ &__activity-icon {
+ width: 13px;
+ height: 13px;
+ margin-right: 6px;
+ border-radius: 50%;
+ background: $scorpion;
+ flex: 0 0 auto;
+ }
+
+ &__activity-text {
+ color: $scorpion;
+ font-size: .75rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__value {
+ display: inline;
+ font-weight: 500;
+ }
+
+ b {
+ font-weight: 500;
+ }
+}
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
new file mode 100644
index 000000000..8687dbbc7
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionActivityLog from '../transaction-activity-log.component'
+import Card from '../../card'
+
+describe('TransactionActivityLog Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
+
+
+ )
+ }
+
+ render () {
+ const { t } = this.context
+ const { className } = this.props
+ const { activities } = this.state
+
+ return (
+
+ { activityText }
+
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
new file mode 100644
index 000000000..4c8b6d971
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import TransactionActivityLog from './transaction-activity-log.component'
+import { conversionRateSelector } from '../../selectors'
+
+const mapStateToProps = state => {
+ return {
+ conversionRate: conversionRateSelector(state),
+ }
+}
+
+export default connect(mapStateToProps)(TransactionActivityLog)
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
new file mode 100644
index 000000000..32834ff47
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,82 @@
+// path constants
+const STATUS_PATH = '/status'
+const GAS_PRICE_PATH = '/txParams/gasPrice'
+
+// status constants
+const UNAPPROVED_STATUS = 'unapproved'
+const SUBMITTED_STATUS = 'submitted'
+const CONFIRMED_STATUS = 'confirmed'
+const DROPPED_STATUS = 'dropped'
+
+// op constants
+const REPLACE_OP = 'replace'
+
+// event constants
+const TRANSACTION_CREATED_EVENT = 'transactionCreated'
+const TRANSACTION_UPDATED_GAS_EVENT = 'transactionUpdatedGas'
+const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
+const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
+const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
+const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
+
+const eventPathsHash = {
+ [STATUS_PATH]: true,
+ [GAS_PRICE_PATH]: true,
+}
+
+const statusHash = {
+ [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
+ [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
+ [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
+}
+
+function eventCreator (eventKey, timestamp, value) {
+ return {
+ eventKey,
+ timestamp,
+ value,
+ }
+}
+
+export function getActivities (transaction) {
+ const { history = [] } = transaction
+
+ return history.reduce((acc, base) => {
+ // First history item should be transaction creation
+ if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
+ const { time, txParams: { value } = {} } = base
+ return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+ } else if (Array.isArray(base)) {
+ const events = []
+
+ base.forEach(entry => {
+ const { op, path, value, timestamp } = entry
+
+ if (path in eventPathsHash && op === REPLACE_OP) {
+ switch (path) {
+ case STATUS_PATH: {
+ if (value in statusHash) {
+ events.push(eventCreator(statusHash[value], timestamp))
+ }
+
+ break
+ }
+
+ case GAS_PRICE_PATH: {
+ events.push(eventCreator(TRANSACTION_UPDATED_GAS_EVENT, timestamp, value))
+ break
+ }
+
+ default: {
+ events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
+ }
+ }
+ }
+ })
+
+ return acc.concat(events)
+ }
+
+ return acc
+ }, [])
+}
diff --git a/ui/app/components/transaction-breakdown/index.js b/ui/app/components/transaction-breakdown/index.js
new file mode 100644
index 000000000..c887f504f
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown.component'
diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
new file mode 100644
index 000000000..1bb108943
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.scss
@@ -0,0 +1,23 @@
+@import './transaction-breakdown-row/index';
+
+.transaction-breakdown {
+ &__card {
+ background: $white;
+ height: 100%;
+ }
+
+ &__row-title {
+ text-transform: capitalize;
+ }
+
+ &__value {
+ text-align: end;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &--eth-total {
+ font-weight: 500;
+ }
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
new file mode 100644
index 000000000..d18cd420c
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdown from '../transaction-breakdown.component'
+import TransactionBreakdownRow from '../transaction-breakdown-row'
+import Card from '../../card'
+
+describe('TransactionBreakdown Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
+ { activities.map((activity, index) => this.renderActivity(activity, index)) }
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
new file mode 100644
index 000000000..bb6075e9f
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import TransactionBreakdownRow from './transaction-breakdown-row'
+import Card from '../card'
+import CurrencyDisplay from '../currency-display'
+import HexToDecimal from '../hex-to-decimal'
+import { ETH, GWEI } from '../../constants/common'
+import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
+import { sumHexes } from '../../helpers/transactions.util'
+
+export default class TransactionBreakdown extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ className: PropTypes.string,
+ }
+
+ static defaultProps = {
+ transaction: {},
+ }
+
+ render () {
+ const { t } = this.context
+ const { transaction, className } = this.props
+ const { txParams: { gas, gasPrice, value } = {} } = transaction
+ const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice })
+ const totalInHex = sumHexes(hexGasTotal, value)
+
+ return (
+
+ { title }
+
+
+ { children }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/transaction-list-item-details/index.js
new file mode 100644
index 000000000..0e878d032
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item-details.component'
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
new file mode 100644
index 000000000..54cf834cc
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.scss
@@ -0,0 +1,49 @@
+.transaction-list-item-details {
+ &__header {
+ margin-bottom: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__header-buttons {
+ display: flex;
+ flex-direction: row;
+ }
+
+ &__header-button {
+ font-size: .625rem;
+
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
+ }
+
+ &__sender-to-recipient-container {
+ margin-bottom: 8px;
+ }
+
+ &__cards-container {
+ display: flex;
+ flex-direction: row;
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ }
+ }
+
+ &__transaction-breakdown {
+ flex: 1;
+ margin-right: 8px;
+ min-width: 0;
+
+ @media screen and (max-width: $break-small) {
+ margin: 0 0 8px 0;
+ }
+ }
+
+ &__transaction-activity-log {
+ flex: 2;
+ min-width: 0;
+ }
+}
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
new file mode 100644
index 000000000..f2bbe8789
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionListItemDetails from '../transaction-list-item-details.component'
+import Button from '../../button'
+import SenderToRecipient from '../../sender-to-recipient'
+import TransactionBreakdown from '../../transaction-breakdown'
+import TransactionActivityLog from '../../transaction-activity-log'
+
+describe('TransactionListItemDetails Component', () => {
+ it('should render properly', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/index.js b/ui/app/components/transaction-list-item/index.js
new file mode 100644
index 000000000..697cc55e9
--- /dev/null
+++ b/ui/app/components/transaction-list-item/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item.container'
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
new file mode 100644
index 000000000..427686c29
--- /dev/null
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -0,0 +1,120 @@
+.transaction-list-item {
+ box-sizing: border-box;
+ min-height: 74px;
+ border-bottom: 1px solid $geyser;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ &__grid {
+ cursor: pointer;
+ width: 100%;
+ padding: 16px 20px;
+ display: grid;
+ grid-template-columns: 45px 1fr 1fr 1fr;
+ grid-template-areas:
+ "identicon action status primary-amount"
+ "identicon nonce status secondary-amount";
+
+ @media screen and (max-width: $break-small) {
+ padding: 8px 20px 12px;
+ grid-template-columns: 45px 5fr 3fr;
+ grid-template-areas:
+ "nonce nonce nonce"
+ "identicon action primary-amount"
+ "identicon status secondary-amount";
+ }
+
+ &:hover {
+ background: rgba($alto, .2);
+ }
+ }
+
+ &__identicon {
+ grid-area: identicon;
+ grid-row: 1 / span 2;
+ align-self: center;
+
+ @media screen and (max-width: $break-small) {
+ grid-row: 2 / span 2;
+ }
+ }
+
+ &__action {
+ text-transform: capitalize;
+ padding: 0 8px 2px 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ grid-area: action;
+ align-self: end;
+ }
+
+ &__status {
+ grid-area: status;
+ grid-row: 1 / span 2;
+ align-self: center;
+
+ @media screen and (max-width: $break-small) {
+ grid-row: 3;
+ }
+ }
+
+ &__nonce {
+ font-size: .75rem;
+ color: #5e6064;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ grid-area: nonce;
+ align-self: start;
+
+ @media screen and (max-width: $break-small) {
+ padding-bottom: 4px;
+ }
+ }
+
+ &__amount {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &--primary {
+ text-align: end;
+ grid-area: primary-amount;
+ align-self: end;
+
+ @media screen and (max-width: $break-small) {
+ padding-bottom: 2px;
+ }
+ }
+
+ &--secondary {
+ text-align: end;
+ font-size: .75rem;
+ color: #5e6064;
+ grid-area: secondary-amount;
+ align-self: start;
+ }
+ }
+
+ &__retry {
+ background: #d1edff;
+ border-radius: 12px;
+ font-size: .75rem;
+ padding: 4px 12px;
+ cursor: pointer;
+ margin-top: 8px;
+
+ @media screen and (max-width: $break-small) {
+ font-size: .5rem;
+ }
+ }
+
+ &__details-container {
+ padding: 8px 16px 16px;
+ background: #f3f4f7;
+ width: 100%;
+ }
+}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
new file mode 100644
index 000000000..e590e96e0
--- /dev/null
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -0,0 +1,165 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../identicon'
+import TransactionStatus from '../transaction-status'
+import TransactionAction from '../transaction-action'
+import CurrencyDisplay from '../currency-display'
+import TokenCurrencyDisplay from '../token-currency-display'
+import TransactionListItemDetails from '../transaction-list-item-details'
+import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
+import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
+import { ETH } from '../../constants/common'
+
+export default class TransactionListItem extends PureComponent {
+ static propTypes = {
+ history: PropTypes.object,
+ transaction: PropTypes.object,
+ value: PropTypes.string,
+ methodData: PropTypes.object,
+ showRetry: PropTypes.bool,
+ retryTransaction: PropTypes.func,
+ setSelectedToken: PropTypes.func,
+ nonceAndDate: PropTypes.string,
+ token: PropTypes.object,
+ assetImages: PropTypes.object,
+ tokenData: PropTypes.object,
+ }
+
+ state = {
+ showTransactionDetails: false,
+ }
+
+ handleClick = () => {
+ const { transaction, history } = this.props
+ const { id, status } = transaction
+ const { showTransactionDetails } = this.state
+
+ if (status === UNAPPROVED_STATUS) {
+ history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
+ return
+ }
+
+ this.setState({ showTransactionDetails: !showTransactionDetails })
+ }
+
+ handleRetry = () => {
+ const {
+ transaction: { txParams: { to } = {} },
+ methodData: { name } = {},
+ setSelectedToken,
+ } = this.props
+
+ if (name === TOKEN_METHOD_TRANSFER) {
+ setSelectedToken(to)
+ }
+
+ this.resubmit()
+ }
+
+ resubmit () {
+ const { transaction: { id }, retryTransaction, history } = this.props
+ retryTransaction(id)
+ .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
+ }
+
+ renderPrimaryCurrency () {
+ const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props
+
+ return token
+ ? (
+
+
+ Details
+
+ {
+ showRetry && (
+
+ )
+ }
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
new file mode 100644
index 000000000..3db9d40ec
--- /dev/null
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import withMethodData from '../../higher-order-components/with-method-data'
+import TransactionListItem from './transaction-list-item.component'
+import { setSelectedToken, retryTransaction } from '../../actions'
+import { hexToDecimal } from '../../helpers/conversions.util'
+import { getTokenData } from '../../helpers/transactions.util'
+import { formatDate } from '../../util'
+
+const mapStateToProps = (state, ownProps) => {
+ const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
+
+ const tokenData = data && getTokenData(data)
+ const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
+
+ return {
+ value,
+ nonceAndDate,
+ tokenData,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
+ retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps),
+ withMethodData,
+)(TransactionListItem)
diff --git a/ui/app/components/transaction-list/index.js b/ui/app/components/transaction-list/index.js
new file mode 100644
index 000000000..688994367
--- /dev/null
+++ b/ui/app/components/transaction-list/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list.container'
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
new file mode 100644
index 000000000..d944ef20e
--- /dev/null
+++ b/ui/app/components/transaction-list/index.scss
@@ -0,0 +1,47 @@
+.transaction-list {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: hidden;
+
+ &__completed-transactions {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
+ &__header {
+ flex: 0 0 auto;
+ font-size: .875rem;
+ color: $dusty-gray;
+ border-bottom: 1px solid $geyser;
+ padding: 16px 0 8px 20px;
+
+ @media screen and (max-width: $break-small) {
+ padding: 8px 0 8px 16px;
+ }
+ }
+
+ &__transactions {
+ flex: 1;
+ overflow-y: auto;
+ }
+
+ &__pending-transactions {
+ margin-bottom: 16px;
+ }
+
+ &__empty {
+ flex: 1;
+ display: grid;
+ grid-template-rows: 35% 1fr;
+ padding-top: 8px;
+ }
+
+ &__empty-text {
+ grid-row-start: 2;
+ display: flex;
+ justify-content: center;
+ color: $silver;
+ }
+}
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
new file mode 100644
index 000000000..c864fea3b
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -0,0 +1,118 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TransactionListItem from '../transaction-list-item'
+import ShapeShiftTransactionListItem from '../shift-list-item'
+import { TRANSACTION_TYPE_SHAPESHIFT } from '../../constants/transactions'
+
+export default class TransactionList extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static defaultProps = {
+ pendingTransactions: [],
+ completedTransactions: [],
+ transactionToRetry: {},
+ }
+
+ static propTypes = {
+ pendingTransactions: PropTypes.array,
+ completedTransactions: PropTypes.array,
+ transactionToRetry: PropTypes.object,
+ selectedToken: PropTypes.object,
+ updateNetworkNonce: PropTypes.func,
+ assetImages: PropTypes.object,
+ }
+
+ componentDidMount () {
+ this.props.updateNetworkNonce()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { pendingTransactions: prevPendingTransactions = [] } = prevProps
+ const { pendingTransactions = [], updateNetworkNonce } = this.props
+
+ if (pendingTransactions.length > prevPendingTransactions.length) {
+ updateNetworkNonce()
+ }
+ }
+
+ shouldShowRetry = transaction => {
+ const { transactionToRetry } = this.props
+ const { id, submittedTime } = transaction
+ return id === transactionToRetry.id && Date.now() - submittedTime > 30000
+ }
+
+ renderTransactions () {
+ const { t } = this.context
+ const { pendingTransactions = [], completedTransactions = [] } = this.props
+ return (
+
+
+ {
+ showTransactionDetails && (
+
+ { nonceAndDate }
+
+
+
+ )
+ }
+
+ {
+ pendingTransactions.length > 0 && (
+
+ )
+ }
+
+ renderTransaction (transaction, index) {
+ const { selectedToken, assetImages } = this.props
+
+ return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
+ ? (
+
+
+ )
+ }
+
+ { `${t('queue')} (${pendingTransactions.length})` }
+
+ {
+ pendingTransactions.map((transaction, index) => (
+ this.renderTransaction(transaction, index)
+ ))
+ }
+
+
+
+ { t('history') }
+
+ {
+ completedTransactions.length > 0
+ ? completedTransactions.map((transaction, index) => (
+ this.renderTransaction(transaction, index)
+ ))
+ : this.renderEmpty()
+ }
+
+
+ )
+ }
+
+ render () {
+ return (
+
+ { this.context.t('noTransactions') }
+
+
+ { this.renderTransactions() }
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
new file mode 100644
index 000000000..2e946c67d
--- /dev/null
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -0,0 +1,51 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionList from './transaction-list.component'
+import {
+ pendingTransactionsSelector,
+ submittedPendingTransactionsSelector,
+ completedTransactionsSelector,
+} from '../../selectors/transactions'
+import { getSelectedAddress, getAssetImages } from '../../selectors'
+import { selectedTokenSelector } from '../../selectors/tokens'
+import { getLatestSubmittedTxWithNonce } from '../../helpers/transactions.util'
+import { updateNetworkNonce } from '../../actions'
+
+const mapStateToProps = state => {
+ const pendingTransactions = pendingTransactionsSelector(state)
+ const submittedPendingTransactions = submittedPendingTransactionsSelector(state)
+ const networkNonce = state.appState.networkNonce
+
+ return {
+ completedTransactions: completedTransactionsSelector(state),
+ pendingTransactions,
+ transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce),
+ selectedToken: selectedTokenSelector(state),
+ selectedAddress: getSelectedAddress(state),
+ assetImages: getAssetImages(state),
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ updateNetworkNonce: address => dispatch(updateNetworkNonce(address)),
+ }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const { selectedAddress, ...restStateProps } = stateProps
+ const { updateNetworkNonce, ...restDispatchProps } = dispatchProps
+
+ return {
+ ...restStateProps,
+ ...restDispatchProps,
+ ...ownProps,
+ updateNetworkNonce: () => updateNetworkNonce(selectedAddress),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(TransactionList)
diff --git a/ui/app/components/transaction-status/index.js b/ui/app/components/transaction-status/index.js
new file mode 100644
index 000000000..dece41e9c
--- /dev/null
+++ b/ui/app/components/transaction-status/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-status.component'
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
new file mode 100644
index 000000000..35be550f7
--- /dev/null
+++ b/ui/app/components/transaction-status/index.scss
@@ -0,0 +1,28 @@
+.transaction-status {
+ height: 26px;
+ width: 81px;
+ border-radius: 4px;
+ background-color: #f0f0f0;
+ color: #5e6064;
+ font-size: .625rem;
+ text-transform: uppercase;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ @media screen and (max-width: $break-small) {
+ height: 16px;
+ width: 70px;
+ font-size: .5rem;
+ }
+
+ &--confirmed {
+ background-color: #eafad7;
+ color: #609a1c;
+ }
+
+ &--approved, &--submitted {
+ background-color: #FFF2DB;
+ color: #CA810A;
+ }
+}
\ No newline at end of file
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
new file mode 100644
index 000000000..c22baf18a
--- /dev/null
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Tooltip from '../tooltip-v2'
+import {
+ UNAPPROVED_STATUS,
+ REJECTED_STATUS,
+ APPROVED_STATUS,
+ SIGNED_STATUS,
+ SUBMITTED_STATUS,
+ CONFIRMED_STATUS,
+ FAILED_STATUS,
+ DROPPED_STATUS,
+} from '../../constants/transactions'
+
+const statusToClassNameHash = {
+ [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
+ [REJECTED_STATUS]: 'transaction-status--rejected',
+ [APPROVED_STATUS]: 'transaction-status--approved',
+ [SIGNED_STATUS]: 'transaction-status--signed',
+ [SUBMITTED_STATUS]: 'transaction-status--submitted',
+ [CONFIRMED_STATUS]: 'transaction-status--confirmed',
+ [FAILED_STATUS]: 'transaction-status--failed',
+ [DROPPED_STATUS]: 'transaction-status--dropped',
+}
+
+const statusToTextHash = {
+ [APPROVED_STATUS]: 'pending',
+ [SUBMITTED_STATUS]: 'pending',
+}
+
+export default class TransactionStatus extends PureComponent {
+ static defaultProps = {
+ title: null,
+ }
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ statusKey: PropTypes.string,
+ className: PropTypes.string,
+ title: PropTypes.string,
+ }
+
+ render () {
+ const { className, statusKey, title } = this.props
+ const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
+
+ return (
+
+
+ { statusText }
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/index.js b/ui/app/components/transaction-view-balance/index.js
new file mode 100644
index 000000000..8824737f7
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-view-balance.container'
diff --git a/ui/app/components/transaction-view-balance/index.scss b/ui/app/components/transaction-view-balance/index.scss
new file mode 100644
index 000000000..12045ab6d
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/index.scss
@@ -0,0 +1,76 @@
+.transaction-view-balance {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ height: 54px;
+
+ &__balance {
+ margin-left: 12px;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (max-width: $break-small) {
+ align-items: center;
+ margin: 16px 0;
+ }
+ }
+
+ &__token-balance {
+ margin-left: 12px;
+ font-size: 1.5rem;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 12px;
+ font-size: 1.75rem;
+ }
+ }
+
+ &__primary-balance {
+ font-size: 1.5rem;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 12px;
+ font-size: 1.75rem;
+ }
+ }
+
+ &__secondary-balance {
+ font-size: 1.15rem;
+ color: #a0a0a0;
+ }
+
+ &__balance-container {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+
+ @media screen and (max-width: $break-small) {
+ margin-bottom: 16px;
+ }
+ }
+
+ &__button {
+ min-width: initial;
+ width: 100px;
+
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
+ }
+
+ @media screen and (max-width: $break-small) {
+ flex-direction: column;
+ height: initial
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
new file mode 100644
index 000000000..bb95cb27e
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TokenBalance from '../../token-balance'
+import CurrencyDisplay from '../../currency-display'
+import { SEND_ROUTE } from '../../../routes'
+import TransactionViewBalance from '../transaction-view-balance.component'
+
+const propsMethodSpies = {
+ showDepositModal: sinon.spy(),
+}
+
+const historySpies = {
+ push: sinon.spy(),
+}
+
+const t = (str1, str2) => str2 ? str1 + str2 : str1
+
+describe('TransactionViewBalance Component', () => {
+ afterEach(() => {
+ propsMethodSpies.showDepositModal.resetHistory()
+ historySpies.push.resetHistory()
+ })
+
+ it('should render ETH balance properly', () => {
+ const wrapper = shallow(
+
+ )
+ }
+
+ renderButtons () {
+ const { t } = this.context
+ const { selectedToken, showDepositModal, history } = this.props
+
+ return (
+
+ {
+ !selectedToken && (
+
+ )
+ }
+
+
+ )
+ }
+
+ render () {
+ const { network, selectedToken, assetImage } = this.props
+
+ return (
+
+
+ )
+ }
+}
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
new file mode 100644
index 000000000..30c5cab16
--- /dev/null
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import TransactionViewBalance from './transaction-view-balance.component'
+import { getSelectedToken, getSelectedAddress, getSelectedTokenAssetImage } from '../../selectors'
+import { showModal } from '../../actions'
+
+const mapStateToProps = state => {
+ const selectedAddress = getSelectedAddress(state)
+ const { metamask: { network, accounts } } = state
+ const account = accounts[selectedAddress]
+ const { balance } = account
+
+ return {
+ selectedToken: getSelectedToken(state),
+ network,
+ balance,
+ assetImage: getSelectedTokenAssetImage(state),
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ showDepositModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER' })),
+ }
+}
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps)
+)(TransactionViewBalance)
diff --git a/ui/app/components/transaction-view/index.js b/ui/app/components/transaction-view/index.js
new file mode 100644
index 000000000..9eb0c3c83
--- /dev/null
+++ b/ui/app/components/transaction-view/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-view.component'
diff --git a/ui/app/components/transaction-view/index.scss b/ui/app/components/transaction-view/index.scss
new file mode 100644
index 000000000..af9771ce0
--- /dev/null
+++ b/ui/app/components/transaction-view/index.scss
@@ -0,0 +1,27 @@
+.transaction-view {
+ flex: 1 1 66.5%;
+ background: $white;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+
+ &__balance-wrapper {
+ @media screen and (max-width: $break-small) {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ flex: 0 0 auto;
+ padding-top: 16px;
+ }
+
+ @media screen and (min-width: $break-large) {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 2.3em 2.37em .8em;
+ flex: 0 0 auto;
+ }
+ }
+}
diff --git a/ui/app/components/transaction-view/transaction-view.component.js b/ui/app/components/transaction-view/transaction-view.component.js
new file mode 100644
index 000000000..7014ca173
--- /dev/null
+++ b/ui/app/components/transaction-view/transaction-view.component.js
@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Media from 'react-media'
+import MenuBar from '../menu-bar'
+import TransactionViewBalance from '../transaction-view-balance'
+import TransactionList from '../transaction-list'
+
+export default class TransactionView extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ render () {
+ return (
+
+
+ { this.renderButtons() }
+
+
+ )
+ }
+}
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
deleted file mode 100644
index 474d62638..000000000
--- a/ui/app/components/tx-list-item.js
+++ /dev/null
@@ -1,356 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const { compose } = require('recompose')
-const { withRouter } = require('react-router-dom')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const inherits = require('util').inherits
-const classnames = require('classnames')
-const abi = require('human-standard-token-abi')
-const abiDecoder = require('abi-decoder')
-abiDecoder.addABI(abi)
-const Identicon = require('./identicon')
-const contractMap = require('eth-contract-metadata')
-const { checksumAddress } = require('../util')
-
-const actions = require('../actions')
-const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
-const { calcTokenAmount } = require('../token-util')
-
-const { getCurrentCurrency } = require('../selectors')
-const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
-
-TxListItem.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxListItem)
-
-function mapStateToProps (state) {
- return {
- tokens: state.metamask.tokens,
- currentCurrency: getCurrentCurrency(state),
- contractExchangeRates: state.metamask.contractExchangeRates,
- selectedAddressTxList: state.metamask.selectedAddressTxList,
- networkNonce: state.appState.networkNonce,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)),
- retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
- }
-}
-
-inherits(TxListItem, Component)
-function TxListItem () {
- Component.call(this)
-
- this.state = {
- total: null,
- fiatTotal: null,
- isTokenTx: null,
- }
-
- this.unmounted = false
-}
-
-TxListItem.prototype.componentDidMount = async function () {
- const { txParams = {} } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { name: txDataName } = decodedData || {}
- const isTokenTx = txDataName === 'transfer'
-
- const { total, fiatTotal } = isTokenTx
- ? await this.getSendTokenTotal()
- : this.getSendEtherTotal()
-
- if (this.unmounted) {
- return
- }
- this.setState({ total, fiatTotal, isTokenTx })
-}
-
-TxListItem.prototype.componentWillUnmount = function () {
- this.unmounted = true
-}
-
-TxListItem.prototype.getAddressText = function () {
- const {
- address,
- txParams = {},
- isMsg,
- } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { name: txDataName, params = [] } = decodedData || {}
- const { value } = params[0] || {}
- const checksummedAddress = checksumAddress(address)
- const checksummedValue = checksumAddress(value)
-
- let addressText
- if (txDataName === 'transfer' || address) {
- const addressToRender = txDataName === 'transfer' ? checksummedValue : checksummedAddress
- addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}`
- } else if (isMsg) {
- addressText = this.context.t('sigRequest')
- } else {
- addressText = this.context.t('contractDeployment')
- }
-
- return addressText
-}
-
-TxListItem.prototype.getSendEtherTotal = function () {
- const {
- transactionAmount,
- conversionRate,
- address,
- currentCurrency,
- } = this.props
-
- if (!address) {
- return {}
- }
-
- const totalInFiat = conversionUtil(transactionAmount, {
- fromNumericBase: 'hex',
- toNumericBase: 'dec',
- fromCurrency: 'ETH',
- toCurrency: currentCurrency,
- fromDenomination: 'WEI',
- numberOfDecimals: 2,
- conversionRate,
- })
- const totalInETH = conversionUtil(transactionAmount, {
- fromNumericBase: 'hex',
- toNumericBase: 'dec',
- fromCurrency: 'ETH',
- toCurrency: 'ETH',
- fromDenomination: 'WEI',
- conversionRate,
- numberOfDecimals: 6,
- })
-
- return {
- total: `${totalInETH} ETH`,
- fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`,
- }
-}
-
-TxListItem.prototype.getTokenInfo = async function () {
- const { txParams = {}, tokenInfoGetter, tokens } = this.props
- const toAddress = txParams.to
-
- let decimals
- let symbol
-
- ({ decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {})
-
- if (!decimals && !symbol) {
- ({ decimals, symbol } = contractMap[toAddress] || {})
- }
-
- if (!decimals && !symbol) {
- ({ decimals, symbol } = await tokenInfoGetter(toAddress))
- }
-
- return { decimals, symbol, address: toAddress }
-}
-
-TxListItem.prototype.getSendTokenTotal = async function () {
- const {
- txParams = {},
- conversionRate,
- contractExchangeRates,
- currentCurrency,
- } = this.props
-
- const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
- const { params = [] } = decodedData || {}
- const { value } = params[1] || {}
- const { decimals, symbol, address } = await this.getTokenInfo()
- const total = calcTokenAmount(value, decimals)
-
- let tokenToFiatRate
- let totalInFiat
-
- if (contractExchangeRates[address]) {
- tokenToFiatRate = multiplyCurrencies(
- contractExchangeRates[address],
- conversionRate
- )
-
- totalInFiat = conversionUtil(total, {
- fromNumericBase: 'dec',
- toNumericBase: 'dec',
- fromCurrency: symbol,
- toCurrency: currentCurrency,
- numberOfDecimals: 2,
- conversionRate: tokenToFiatRate,
- })
- }
-
- const showFiat = Boolean(totalInFiat) && currentCurrency.toUpperCase() !== symbol
-
- return {
- total: `${total} ${symbol}`,
- fiatTotal: showFiat && `${totalInFiat} ${currentCurrency.toUpperCase()}`,
- }
-}
-
-TxListItem.prototype.showRetryButton = function () {
- const {
- transactionSubmittedTime,
- selectedAddressTxList,
- transactionId,
- txParams,
- networkNonce,
- } = this.props
- if (!txParams) {
- return false
- }
- let currentTxSharesEarliestNonce = false
- const currentNonce = txParams.nonce
- const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
- const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
- const currentSubmittedTxs = selectedAddressTxList.filter(tx => tx.status === 'submitted')
- const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1]
- const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce &&
- lastSubmittedTxWithCurrentNonce.id === transactionId
- if (currentSubmittedTxs.length > 0) {
- currentTxSharesEarliestNonce = currentNonce === networkNonce
- }
-
- return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
-}
-
-TxListItem.prototype.setSelectedToken = function (tokenAddress) {
- this.props.setSelectedToken(tokenAddress)
-}
-
-TxListItem.prototype.resubmit = function () {
- const { transactionId } = this.props
- this.props.retryTransaction(transactionId)
- .then(id => this.props.history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
-}
-
-TxListItem.prototype.render = function () {
- const {
- transactionStatus,
- onClick,
- transactionId,
- dateString,
- address,
- className,
- txParams,
- } = this.props
- const { total, fiatTotal, isTokenTx } = this.state
-
- return h(`div${className || ''}`, {
- key: transactionId,
- onClick: () => onClick && onClick(transactionId),
- }, [
- h(`div.flex-column.tx-list-item-wrapper`, {}, [
-
- h('div.tx-list-date-wrapper', {
- style: {},
- }, [
- h('span.tx-list-date', {}, [
- dateString,
- ]),
- ]),
-
- h('div.flex-row.tx-list-content-wrapper', {
- style: {},
- }, [
-
- h('div.tx-list-identicon-wrapper', {
- style: {},
- }, [
- h(Identicon, {
- address,
- diameter: 28,
- }),
- ]),
-
- h('div.tx-list-account-and-status-wrapper', {}, [
- h('div.tx-list-account-wrapper', {
- style: {},
- }, [
- h('span.tx-list-account', {}, [
- this.getAddressText(address),
- ]),
- ]),
-
- h('div.tx-list-status-wrapper', {
- style: {},
- }, [
- h('span', {
- className: classnames('tx-list-status', {
- 'tx-list-status--rejected': transactionStatus === 'rejected',
- 'tx-list-status--failed': transactionStatus === 'failed',
- 'tx-list-status--dropped': transactionStatus === 'dropped',
- }),
- },
- this.txStatusIndicator(),
- ),
- ]),
- ]),
-
- h('div.flex-column.tx-list-details-wrapper', {
- style: {},
- }, [
-
- h('span.tx-list-value', total),
-
- fiatTotal && h('span.tx-list-fiat-value', fiatTotal),
-
- ]),
- ]),
-
- this.showRetryButton() && h('.tx-list-item-retry-container', {
- onClick: (event) => {
- event.stopPropagation()
- if (isTokenTx) {
- this.setSelectedToken(txParams.to)
- }
- this.resubmit()
- },
- }, [
- h('span', 'Taking too long? Increase the gas price on your transaction'),
- ]),
-
- ]), // holding on icon from design
- ])
-}
-
-TxListItem.prototype.txStatusIndicator = function () {
- const { transactionStatus } = this.props
-
- let name
-
- if (transactionStatus === 'unapproved') {
- name = this.context.t('unapproved')
- } else if (transactionStatus === 'rejected') {
- name = this.context.t('rejected')
- } else if (transactionStatus === 'approved') {
- name = this.context.t('approved')
- } else if (transactionStatus === 'signed') {
- name = this.context.t('signed')
- } else if (transactionStatus === 'submitted') {
- name = this.context.t('submitted')
- } else if (transactionStatus === 'confirmed') {
- name = this.context.t('confirmed')
- } else if (transactionStatus === 'failed') {
- name = this.context.t('failed')
- } else if (transactionStatus === 'dropped') {
- name = this.context.t('dropped')
- }
- return name
-}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
deleted file mode 100644
index ad28f2c1a..000000000
--- a/ui/app/components/tx-list.js
+++ /dev/null
@@ -1,166 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethNetProps = require('eth-net-props')
-const selectors = require('../selectors')
-const TxListItem = require('./tx-list-item')
-const ShiftListItem = require('./shift-list-item')
-const { formatDate } = require('../util')
-const { showConfTxPage, updateNetworkNonce } = require('../actions')
-const classnames = require('classnames')
-const { tokenInfoGetter } = require('../token-util')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxList)
-
-TxList.contextTypes = {
- t: PropTypes.func,
-}
-
-function mapStateToProps (state) {
- return {
- txsToRender: selectors.transactionsSelector(state),
- conversionRate: selectors.conversionRateSelector(state),
- selectedAddress: selectors.getSelectedAddress(state),
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id })),
- updateNetworkNonce: (address) => dispatch(updateNetworkNonce(address)),
- }
-}
-
-inherits(TxList, Component)
-function TxList () {
- Component.call(this)
-}
-
-TxList.prototype.componentWillMount = function () {
- this.tokenInfoGetter = tokenInfoGetter()
- this.props.updateNetworkNonce(this.props.selectedAddress)
-}
-
-TxList.prototype.componentDidUpdate = function (prevProps) {
- const oldTxsToRender = prevProps.txsToRender
- const {
- txsToRender: newTxsToRender,
- selectedAddress,
- updateNetworkNonce,
- } = this.props
-
- if (newTxsToRender.length > oldTxsToRender.length) {
- updateNetworkNonce(selectedAddress)
- }
-}
-
-TxList.prototype.render = function () {
- return h('div.flex-column', [
- h('div.flex-row.tx-list-header-wrapper', [
- h('div.flex-row.tx-list-header', [
- h('div', this.context.t('transactions')),
- ]),
- ]),
- h('div.flex-column.tx-list-container', {}, [
- this.renderTransaction(),
- ]),
- ])
-}
-
-TxList.prototype.renderTransaction = function () {
- const { txsToRender, conversionRate } = this.props
-
- return txsToRender.length
- ? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
- : [h(
- 'div.tx-list-item.tx-list-item--empty',
- { key: 'tx-list-none' },
- [ this.context.t('noTransactions') ],
- )]
-}
-
-// TODO: Consider moving TxListItem into a separate component
-TxList.prototype.renderTransactionListItem = function (transaction, conversionRate, index) {
- // console.log({transaction})
- // refer to transaction-list.js:line 58
-
- if (transaction.key === 'shapeshift') {
- return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` })
- }
-
- const props = {
- dateString: formatDate(transaction.time),
- address: transaction.txParams && transaction.txParams.to,
- transactionStatus: transaction.status,
- transactionAmount: transaction.txParams && transaction.txParams.value,
- transactionId: transaction.id,
- transactionHash: transaction.hash,
- transactionNetworkId: transaction.metamaskNetworkId,
- transactionSubmittedTime: transaction.submittedTime,
- }
-
- const {
- address,
- transactionStatus,
- transactionAmount,
- dateString,
- transactionId,
- transactionHash,
- transactionNetworkId,
- transactionSubmittedTime,
- } = props
- const { history } = this.props
-
- const opts = {
- key: transactionId || transactionHash,
- txParams: transaction.txParams,
- isMsg: Boolean(transaction.msgParams),
- transactionStatus,
- transactionId,
- dateString,
- address,
- transactionAmount,
- transactionHash,
- conversionRate,
- tokenInfoGetter: this.tokenInfoGetter,
- transactionSubmittedTime,
- }
-
- const isUnapproved = transactionStatus === 'unapproved'
-
- if (isUnapproved) {
- opts.onClick = () => {
- this.props.showConfTxPage({ id: transactionId})
- history.push(CONFIRM_TRANSACTION_ROUTE)
- }
- opts.transactionStatus = this.context.t('notStarted')
- } else if (transactionHash) {
- opts.onClick = () => this.view(transactionHash, transactionNetworkId)
- }
-
- opts.className = classnames('.tx-list-item', {
- '.tx-list-pending-item-container': isUnapproved,
- '.tx-list-clickable': Boolean(transactionHash) || isUnapproved,
- })
-
- return h(TxListItem, opts)
-}
-
-TxList.prototype.view = function (txHash, network) {
- const url = ethNetProps.explorerLinks.getExplorerTxLinkFor(txHash, network)
- if (url) {
- navigateTo(url)
- }
-}
-
-function navigateTo (url) {
- global.platform.openWindow({ url })
-}
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
deleted file mode 100644
index 654090da6..000000000
--- a/ui/app/components/tx-view.js
+++ /dev/null
@@ -1,156 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const actions = require('../actions')
-const selectors = require('../selectors')
-const { SEND_ROUTE } = require('../routes')
-const { checksumAddress: toChecksumAddress } = require('../util')
-
-const BalanceComponent = require('./balance-component')
-const Tooltip = require('./tooltip')
-const TxList = require('./tx-list')
-const SelectedAccount = require('./selected-account')
-
-module.exports = compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps)
-)(TxView)
-
-TxView.contextTypes = {
- t: PropTypes.func,
-}
-
-function mapStateToProps (state) {
- const sidebarOpen = state.appState.sidebarOpen
- const isMascara = state.appState.isMascara
-
- const identities = state.metamask.identities
- const accounts = state.metamask.accounts
- const network = state.metamask.network
- const selectedTokenAddress = state.metamask.selectedTokenAddress
- const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
- const checksumAddress = toChecksumAddress(selectedAddress)
- const identity = identities[selectedAddress]
-
- return {
- sidebarOpen,
- selectedAddress,
- checksumAddress,
- selectedTokenAddress,
- selectedToken: selectors.getSelectedToken(state),
- identity,
- network,
- isMascara,
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- showSidebar: () => { dispatch(actions.showSidebar()) },
- hideSidebar: () => { dispatch(actions.hideSidebar()) },
- showModal: (payload) => { dispatch(actions.showModal(payload)) },
- showSendPage: () => { dispatch(actions.showSendPage()) },
- showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
- }
-}
-
-inherits(TxView, Component)
-function TxView () {
- Component.call(this)
-}
-
-TxView.prototype.renderHeroBalance = function () {
- const { selectedToken } = this.props
-
- return h('div.hero-balance', {}, [
-
- h(BalanceComponent, { token: selectedToken }),
-
- this.renderButtons(),
- ])
-}
-
-TxView.prototype.renderButtons = function () {
- const {selectedToken, showModal, history } = this.props
-
- return !selectedToken
- ? (
- h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-primary.hero-balance-button', {
- onClick: () => showModal({
- name: 'DEPOSIT_ETHER',
- }),
- }, this.context.t('deposit')),
-
- h('button.btn-primary.hero-balance-button', {
- style: {
- marginLeft: '0.8em',
- },
- onClick: () => history.push(SEND_ROUTE),
- }, this.context.t('send')),
- ])
- )
- : (
- h('div.flex-row.flex-center.hero-balance-buttons', [
- h('button.btn-primary.hero-balance-button', {
- onClick: () => history.push(SEND_ROUTE),
- }, this.context.t('send')),
- ])
- )
-}
-
-TxView.prototype.render = function () {
- const { hideSidebar, isMascara, showSidebar, sidebarOpen } = this.props
- const { t } = this.context
-
- return h('div.tx-view.flex-column', {
- style: {},
- }, [
-
- h('div.flex-row.phone-visible', {
- style: {
- justifyContent: 'center',
- alignItems: 'center',
- flex: '0 0 auto',
- marginBottom: '16px',
- padding: '5px',
- borderBottom: '1px solid #e5e5e5',
- },
- }, [
-
- h(Tooltip, {
- title: t('menu'),
- position: 'bottom',
- }, [
- h('div.fa.fa-bars', {
- style: {
- fontSize: '1.3em',
- cursor: 'pointer',
- padding: '10px',
- },
- onClick: () => sidebarOpen ? hideSidebar() : showSidebar(),
- }),
- ]),
-
- h(SelectedAccount),
-
- !isMascara && h(Tooltip, {
- title: t('openInTab'),
- position: 'bottom',
- }, [
- h('div.open-in-browser', {
- onClick: () => global.platform.openExtensionInBrowser(),
- }, [h('img', { src: 'images/popout.svg' })]),
- ]),
- ]),
-
- this.renderHeroBalance(),
-
- h(TxList),
-
- ])
-}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index c16133b32..20b5f62b9 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -9,7 +9,7 @@ const classnames = require('classnames')
const { checksumAddress } = require('../util')
const Identicon = require('./identicon')
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('./tooltip-v2.js')
+const Tooltip = require('./tooltip-v2.js').default
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
@@ -17,6 +17,8 @@ const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
+import Button from './button'
+
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
@@ -26,11 +28,15 @@ WalletView.contextTypes = {
t: PropTypes.func,
}
+WalletView.defaultProps = {
+ responsiveDisplayClassname: '',
+}
+
function mapStateToProps (state) {
return {
network: state.metamask.network,
- sidebarOpen: state.appState.sidebarOpen,
+ sidebarOpen: state.appState.sidebar.isOpen,
identities: state.metamask.identities,
accounts: state.metamask.accounts,
tokens: state.metamask.tokens,
@@ -130,8 +136,9 @@ WalletView.prototype.render = function () {
}
}
- return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+ return h('div.wallet-view.flex-column', {
style: {},
+ className: responsiveDisplayClassname,
}, [
// TODO: Separate component: wallet account details
@@ -193,7 +200,9 @@ WalletView.prototype.render = function () {
h(TokenList),
- h('button.btn-primary.wallet-view__add-token-button', {
+ h(Button, {
+ type: 'primary',
+ className: 'wallet-view__add-token-button',
onClick: () => {
history.push(ADD_TOKEN_ROUTE)
sidebarOpen && hideSidebar()
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
new file mode 100644
index 000000000..a20f6cc02
--- /dev/null
+++ b/ui/app/constants/common.js
@@ -0,0 +1,3 @@
+export const ETH = 'ETH'
+export const GWEI = 'GWEI'
+export const WEI = 'WEI'
diff --git a/ui/app/constants/transactions.js b/ui/app/constants/transactions.js
new file mode 100644
index 000000000..df6c4c8a4
--- /dev/null
+++ b/ui/app/constants/transactions.js
@@ -0,0 +1,22 @@
+export const UNAPPROVED_STATUS = 'unapproved'
+export const REJECTED_STATUS = 'rejected'
+export const APPROVED_STATUS = 'approved'
+export const SIGNED_STATUS = 'signed'
+export const SUBMITTED_STATUS = 'submitted'
+export const CONFIRMED_STATUS = 'confirmed'
+export const FAILED_STATUS = 'failed'
+export const DROPPED_STATUS = 'dropped'
+
+export const TOKEN_METHOD_TRANSFER = 'transfer'
+export const TOKEN_METHOD_APPROVE = 'approve'
+export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom'
+
+export const SEND_ETHER_ACTION_KEY = 'sentEther'
+export const DEPLOY_CONTRACT_ACTION_KEY = 'contractDeployment'
+export const APPROVE_ACTION_KEY = 'approve'
+export const SEND_TOKEN_ACTION_KEY = 'sentTokens'
+export const TRANSFER_FROM_ACTION_KEY = 'transferFrom'
+export const SIGNATURE_REQUEST_KEY = 'signatureRequest'
+export const UNKNOWN_FUNCTION_KEY = 'unknownFunction'
+
+export const TRANSACTION_TYPE_SHAPESHIFT = 'shapeshift'
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index 38f5f1c50..f271b5683 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -35,6 +35,7 @@ BigNumber.config({
// Big Number Constants
const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
+const BIG_NUMBER_ETH_MULTIPLIER = new BigNumber('1')
// Individual Setters
const convert = R.invoker(1, 'times')
@@ -52,10 +53,12 @@ const toBigNumber = {
const toNormalizedDenomination = {
WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
+ ETH: bigNumber => bigNumber.div(BIG_NUMBER_ETH_MULTIPLIER),
}
const toSpecifiedDenomination = {
WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(9),
+ ETH: bigNumber => bigNumber.times(BIG_NUMBER_ETH_MULTIPLIER).round(9),
}
const baseChange = {
hex: n => n.toString(16),
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 34565767f..655188a3e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,7 @@
Buttons
*/
-.btn-default,
-.btn-primary,
-.btn-secondary,
-.btn-confirm {
+.button {
height: 44px;
background: $white;
display: flex;
@@ -79,6 +76,16 @@
background-color: $curious-blue;
}
+.btn-raised {
+ color: $curious-blue;
+ background-color: $white;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ height: initial;
+ width: initial;
+ min-width: initial;
+}
+
.btn--large {
height: 54px;
}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
deleted file mode 100644
index eba93ecb4..000000000
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-.hero-balance {
-
- @media screen and (max-width: $break-small) {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- flex: 0 0 auto;
- padding-top: 16px;
- }
-
- @media screen and (min-width: $break-large) {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- margin: 2.3em 2.37em .8em;
- flex: 0 0 auto;
- }
-
- .balance-container {
- display: flex;
- margin: 0;
- justify-content: flex-start;
- align-items: center;
-
- @media screen and (max-width: $break-small) {
- flex-direction: column;
- flex: 0 0 auto;
- max-width: 100%;
- }
-
- @media screen and (min-width: $break-large) {
- flex-direction: row;
- flex-grow: 3;
- min-width: 0;
- }
- }
-
- .balance-display {
- .token-amount {
- color: $black;
- max-width: 100%;
-
- .token-balance {
- display: flex;
- }
- }
-
- @media screen and (max-width: $break-small) {
- max-width: 100%;
- text-align: center;
-
- .token-amount {
- font-size: 1.75rem;
- margin-top: 1rem;
-
- .token-balance {
- flex-direction: column;
- }
- }
-
- .fiat-amount {
- font-size: 115%;
- margin-top: 8.5%;
- color: #a0a0a0;
- }
- }
-
- @media screen and (min-width: $break-large) {
- margin: 0 .8em;
- justify-content: flex-start;
- align-items: flex-start;
- min-width: 0;
-
- .token-amount {
- font-size: 1.5rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 105%;
- }
- }
-
- @media #{$sub-mid-size-breakpoint-range} {
- margin-left: .4em;
- margin-right: .4em;
- justify-content: flex-start;
- align-items: flex-start;
-
- .token-amount {
- font-size: 1rem;
- }
-
- .fiat-amount {
- margin-top: .25%;
- font-size: 1rem;
- }
- }
- }
-
- .hero-balance-buttons {
-
- @media screen and (max-width: $break-small) {
- width: 100%;
- // height: 100px; // needed a round number to set the heights of the buttons inside
- flex: 0 0 auto;
- padding: 16px 0;
- }
-
- @media screen and (min-width: $break-large) {
- flex-grow: 2;
- justify-content: flex-end;
- }
- }
-}
-
-.hero-balance-button {
- min-width: initial;
- width: 6rem;
-
- @media #{$sub-mid-size-breakpoint-range} {
- padding: .4rem;
- width: 4rem;
- display: flex;
- flex: 1;
- justify-content: center;
- }
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 96ad5fe64..99deaf918 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,7 +1,5 @@
@import './buttons.scss';
-@import './header.scss';
-
@import './footer.scss';
@import './network.scss';
@@ -21,8 +19,6 @@
@import './loading-overlay.scss';
// Balances
-@import './hero-balance.scss';
-
@import './wallet-balance.scss';
// Tx List and Sections
@@ -40,8 +36,6 @@
@import './gas-slider.scss';
-@import './settings.scss';
-
@import './tab-bar.scss';
@import './simple-dropdown.scss';
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index b07d6af17..b023c8423 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,6 +1,6 @@
.loading-overlay {
left: 0;
- z-index: 50;
+ z-index: 51;
position: absolute;
flex-direction: column;
display: flex;
@@ -8,25 +8,9 @@
align-items: center;
flex: 1 1 auto;
width: 100%;
+ height: 100%;
background: rgba(255, 255, 255, .8);
- @media screen and (max-width: 575px) {
- margin-top: 66px;
- height: calc(100% - 66px);
- }
-
- @media screen and (min-width: 576px) {
- margin-top: 75px;
- height: calc(100% - 75px);
- }
-
- &--full-screen {
- position: fixed;
- height: 100vh;
- width: 100vw;
- margin-top: 0;
- }
-
&__container {
position: absolute;
top: 33%;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index bbfd85c90..8e963d495 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -6,7 +6,6 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
*/
// Component Colors
-$tx-view-bg: $white;
$wallet-view-bg: $alabaster;
// Main container
@@ -23,6 +22,12 @@ $wallet-view-bg: $alabaster;
display: none;
}
+.main-container-wrapper {
+ display: flex;
+ width: 100vw;
+ justify-content: center;
+}
+
//Account and transaction details
.account-and-transaction-details {
display: flex;
@@ -30,32 +35,6 @@ $wallet-view-bg: $alabaster;
min-width: 0;
}
-// tx view
-
-.tx-view {
- flex: 1 1 66.5%;
- background: $tx-view-bg;
- min-width: 0;
-
- // No title on mobile
- @media screen and (max-width: 575px) {
- .identicon-wrapper {
- display: none;
- }
-
- .account-name {
- display: none;
- }
- }
-}
-
-.open-in-browser {
- cursor: pointer;
- display: flex;
- justify-content: center;
- padding: 10px;
-}
-
// wallet view and sidebar
.wallet-view {
@@ -175,7 +154,7 @@ $wallet-view-bg: $alabaster;
}
}
-.wallet-view.sidebar {
+.wallet-view.sidebar-right {
flex: 1 0 230px;
background: rgb(250, 250, 250);
z-index: $sidebar-z-index;
@@ -193,20 +172,6 @@ $wallet-view-bg: $alabaster;
height: calc(100% - 56px);
}
-.sidebar-overlay {
- z-index: $sidebar-overlay-z-index;
- position: fixed;
- // top: 41px;
- height: 100%;
- width: 100%;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 1;
- visibility: visible;
- background-color: rgba(0, 0, 0, .3);
-}
-
// main-container media queries
@media screen and (min-width: 576px) {
@@ -260,6 +225,10 @@ $wallet-view-bg: $alabaster;
overflow-y: auto;
background-color: $white;
}
+
+ .main-container-wrapper {
+ height: 100%;
+ }
}
// wallet view
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index b607aded3..445b9ebf5 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -23,6 +23,25 @@
}
}
+ &__typed-container {
+ padding: 17px;
+
+ h1 {
+ font-weight: 900;
+ margin-bottom: 5px;
+ }
+
+ * {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > div {
+ margin-bottom: 10px;
+ }
+ }
+
&__header {
height: 64px;
width: 100%;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 806ac8536..7fc960d7d 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -622,12 +622,14 @@
position: relative;
&__down-caret {
+ z-index: 1026;
position: absolute;
top: 18px;
right: 12px;
}
&__qr-code {
+ z-index: 1026;
position: absolute;
top: 13px;
right: 33px;
@@ -647,6 +649,8 @@
&__to-autocomplete, &__memo-text-area, &__hex-data {
&__input {
+ z-index: 1025;
+ position: relative;
height: 54px;
width: 100%;
border: 1px solid $alto;
@@ -833,6 +837,10 @@
line-height: 12px;
color: $red;
}
+
+ &__cancel {
+ margin-right: 10px;
+ }
}
&__gas-modal-card {
@@ -880,12 +888,21 @@
font-size: 18px;
color: $tundora;
right: 0px;
- padding: 1px 4px;
+ padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
+ .gas-tooltip-input-arrow-wrapper {
+ align-items: center;
+ align-self: stretch;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ justify-content: center;
+ }
+
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
deleted file mode 100644
index 0dd61ac5e..000000000
--- a/ui/app/css/itcss/components/settings.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-.settings {
- position: relative;
- background: $white;
- display: flex;
- flex-flow: column nowrap;
-}
-
-.settings__header {
- padding: 25px;
-}
-
-.settings__close-button::after {
- content: '\00D7';
- font-size: 40px;
- color: $dusty-gray;
- position: absolute;
- top: 25px;
- right: 30px;
- cursor: pointer;
-}
-
-.settings__error {
- padding-bottom: 20px;
- text-align: center;
- color: $crimson;
-}
-
-.settings__content {
- padding: 0 25px;
- height: auto;
- overflow: auto;
-}
-
-.settings__content-row {
- display: flex;
- flex-direction: row;
- padding: 10px 0 20px;
-
- @media screen and (max-width: 575px) {
- flex-direction: column;
- padding: 10px 0;
- }
-}
-
-.settings__content-item {
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
- padding: 0 5px;
- height: 71px;
-
- @media screen and (max-width: 575px) {
- height: initial;
- padding: 5px 0;
- }
-
- &--without-height {
- height: initial;
- }
-}
-
-.settings__content-item-col {
- max-width: 300px;
- display: flex;
- flex-direction: column;
-
- @media screen and (max-width: 575px) {
- max-width: 100%;
- width: 100%;
- }
-}
-
-.settings__content-description {
- font-size: 14px;
- color: $dusty-gray;
- padding-top: 5px;
-}
-
-.settings__input {
- padding-left: 10px;
- font-size: 14px;
- height: 40px;
- border: 1px solid $alto;
-}
-
-.settings__input::-webkit-input-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input::-moz-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input:-ms-input-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__input:-moz-placeholder {
- font-weight: 100;
- color: $dusty-gray;
-}
-
-.settings__provider-wrapper {
- font-size: 16px;
- border: 1px solid $alto;
- border-radius: 2px;
- padding: 15px;
- background-color: $white;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.settings__provider-icon {
- height: 10px;
- width: 10px;
- margin-right: 10px;
- border-radius: 10px;
-}
-
-.settings__rpc-save-button {
- align-self: flex-end;
- padding: 5px;
- text-transform: uppercase;
- color: $dusty-gray;
- cursor: pointer;
-}
-
-.settings__button--red {
- border-color: lighten($monzo, 10%);
- color: $monzo;
-
- &:active {
- background: lighten($monzo, 55%);
- border-color: $monzo;
- }
-
- &:hover {
- border-color: $monzo;
- }
-}
-
-.settings__button--orange {
- border-color: lighten($ecstasy, 20%);
- color: $ecstasy;
-
- &:active {
- background: lighten($ecstasy, 40%);
- border-color: $ecstasy;
- }
-
- &:hover {
- border-color: $ecstasy;
- }
-}
-
-.settings__info-logo-wrapper {
- height: 80px;
- margin-bottom: 20px;
-}
-
-.settings__info-logo {
- max-height: 100%;
- max-width: 100%;
-}
-
-.settings__info-item {
- padding: 10px 0;
-}
-
-.settings__info-link-header {
- padding-bottom: 15px;
-
- @media screen and (max-width: 575px) {
- padding-bottom: 5px;
- }
-}
-
-.settings__info-link-item {
- padding: 15px 0;
-
- @media screen and (max-width: 575px) {
- padding: 5px 0;
- }
-}
-
-.settings__info-version-number {
- padding-top: 5px;
- font-size: 13px;
- color: $dusty-gray;
-}
-
-.settings__info-about {
- color: $dusty-gray;
- margin-bottom: 15px;
-}
-
-.settings__info-link {
- color: $curious-blue;
-}
-
-.settings__info-separator {
- margin: 15px 0;
- width: 80px;
- border-color: $alto;
- border: none;
- height: 1px;
- background-color: $alto;
- color: $alto;
-}
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 1d45ff13b..3435353d9 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -243,7 +243,7 @@
}
.tx-list-item {
- border-top: 1px solid rgb(231, 231, 231);
+ border-bottom: 1px solid $geyser;
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
index 1885e12d1..30c32f2bf 100644
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/ui/app/ducks/confirm-transaction.duck.js
@@ -5,9 +5,7 @@ import {
} from '../selectors/confirm-transaction'
import {
- getTokenData,
- getMethodData,
- getTransactionAmount,
+ getValueFromWeiHex,
getTransactionFee,
getHexGasTotal,
addFiat,
@@ -16,6 +14,7 @@ import {
hexGreaterThan,
} from '../helpers/confirm-transaction/util'
+import { getTokenData, getMethodData, isSmartContractAddress } from '../helpers/transactions.util'
import { getSymbolAndDecimals } from '../token-util'
import { conversionUtil } from '../conversion-util'
@@ -35,8 +34,9 @@ const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
const UPDATE_HEX_GAS_TOTAL = createActionType('UPDATE_HEX_GAS_TOTAL')
const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
const UPDATE_NONCE = createActionType('UPDATE_NONCE')
-const FETCH_METHOD_DATA_START = createActionType('FETCH_METHOD_DATA_START')
-const FETCH_METHOD_DATA_END = createActionType('FETCH_METHOD_DATA_END')
+const UPDATE_TO_SMART_CONTRACT = createActionType('UPDATE_TO_SMART_CONTRACT')
+const FETCH_DATA_START = createActionType('FETCH_DATA_START')
+const FETCH_DATA_END = createActionType('FETCH_DATA_END')
// Initial state
const initState = {
@@ -55,7 +55,8 @@ const initState = {
ethTransactionTotal: '',
hexGasTotal: '',
nonce: '',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
}
// Reducer
@@ -138,15 +139,20 @@ export default function reducer ({ confirmTransaction: confirmState = initState
...confirmState,
nonce: action.payload,
}
- case FETCH_METHOD_DATA_START:
+ case UPDATE_TO_SMART_CONTRACT:
return {
...confirmState,
- fetchingMethodData: true,
+ toSmartContract: action.payload,
}
- case FETCH_METHOD_DATA_END:
+ case FETCH_DATA_START:
return {
...confirmState,
- fetchingMethodData: false,
+ fetchingData: true,
+ }
+ case FETCH_DATA_END:
+ return {
+ ...confirmState,
+ fetchingData: false,
}
case CLEAR_CONFIRM_TRANSACTION:
return initState
@@ -237,9 +243,16 @@ export function updateNonce (nonce) {
}
}
-export function setFetchingMethodData (isFetching) {
+export function updateToSmartContract (toSmartContract) {
return {
- type: isFetching ? FETCH_METHOD_DATA_START : FETCH_METHOD_DATA_END,
+ type: UPDATE_TO_SMART_CONTRACT,
+ payload: toSmartContract,
+ }
+}
+
+export function setFetchingData (isFetching) {
+ return {
+ type: isFetching ? FETCH_DATA_START : FETCH_DATA_END,
}
}
@@ -286,10 +299,10 @@ export function updateTxDataAndCalculate (txData) {
const { txParams: { value, gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
- const fiatTransactionAmount = getTransactionAmount({
+ const fiatTransactionAmount = getValueFromWeiHex({
value, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
})
- const ethTransactionAmount = getTransactionAmount({
+ const ethTransactionAmount = getValueFromWeiHex({
value, toCurrency: 'ETH', conversionRate, numberOfDecimals: 6,
})
@@ -338,19 +351,22 @@ export function setTransactionToConfirm (transactionId) {
dispatch(updateTxDataAndCalculate(txData))
const { txParams } = transaction
+ const { to } = txParams
if (txParams.data) {
const { tokens: existingTokens } = state
const { data, to: tokenAddress } = txParams
try {
- dispatch(setFetchingMethodData(true))
+ dispatch(setFetchingData(true))
const methodData = await getMethodData(data)
dispatch(updateMethodData(methodData))
- dispatch(setFetchingMethodData(false))
+ const toSmartContract = await isSmartContractAddress(to)
+ dispatch(updateToSmartContract(toSmartContract))
+ dispatch(setFetchingData(false))
} catch (error) {
dispatch(updateMethodData({}))
- dispatch(setFetchingMethodData(false))
+ dispatch(setFetchingData(false))
}
const tokenData = getTokenData(data)
diff --git a/ui/app/ducks/tests/confirm-transaction.duck.test.js b/ui/app/ducks/tests/confirm-transaction.duck.test.js
index 111674e33..1bab0add0 100644
--- a/ui/app/ducks/tests/confirm-transaction.duck.test.js
+++ b/ui/app/ducks/tests/confirm-transaction.duck.test.js
@@ -1,6 +1,7 @@
import assert from 'assert'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
+import sinon from 'sinon'
import ConfirmTransactionReducer, * as actions from '../confirm-transaction.duck.js'
@@ -20,7 +21,8 @@ const initialState = {
ethTransactionTotal: '',
hexGasTotal: '',
nonce: '',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
}
const UPDATE_TX_DATA = 'metamask/confirm-transaction/UPDATE_TX_DATA'
@@ -35,8 +37,9 @@ const UPDATE_TRANSACTION_TOTALS = 'metamask/confirm-transaction/UPDATE_TRANSACTI
const UPDATE_HEX_GAS_TOTAL = 'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL'
const UPDATE_TOKEN_PROPS = 'metamask/confirm-transaction/UPDATE_TOKEN_PROPS'
const UPDATE_NONCE = 'metamask/confirm-transaction/UPDATE_NONCE'
-const FETCH_METHOD_DATA_START = 'metamask/confirm-transaction/FETCH_METHOD_DATA_START'
-const FETCH_METHOD_DATA_END = 'metamask/confirm-transaction/FETCH_METHOD_DATA_END'
+const UPDATE_TO_SMART_CONTRACT = 'metamask/confirm-transaction/UPDATE_TO_SMART_CONTRACT'
+const FETCH_DATA_START = 'metamask/confirm-transaction/FETCH_DATA_START'
+const FETCH_DATA_END = 'metamask/confirm-transaction/FETCH_DATA_END'
const CLEAR_CONFIRM_TRANSACTION = 'metamask/confirm-transaction/CLEAR_CONFIRM_TRANSACTION'
describe('Confirm Transaction Duck', () => {
@@ -64,7 +67,8 @@ describe('Confirm Transaction Duck', () => {
ethTransactionTotal: '469.27',
hexGasTotal: '0x1319718a5000',
nonce: '0x0',
- fetchingMethodData: false,
+ toSmartContract: false,
+ fetchingData: false,
},
}
@@ -271,30 +275,43 @@ describe('Confirm Transaction Duck', () => {
)
})
- it('should set fetchingMethodData to true when receiving a FETCH_METHOD_DATA_START action', () => {
+ it('should update nonce when receiving an UPDATE_TO_SMART_CONTRACT action', () => {
assert.deepEqual(
ConfirmTransactionReducer(mockState, {
- type: FETCH_METHOD_DATA_START,
+ type: UPDATE_TO_SMART_CONTRACT,
+ payload: true,
}),
{
...mockState.confirmTransaction,
- fetchingMethodData: true,
+ toSmartContract: true,
}
)
})
- it('should set fetchingMethodData to false when receiving a FETCH_METHOD_DATA_END action', () => {
+ it('should set fetchingData to true when receiving a FETCH_DATA_START action', () => {
assert.deepEqual(
- ConfirmTransactionReducer({ confirmTransaction: { fetchingMethodData: true } }, {
- type: FETCH_METHOD_DATA_END,
+ ConfirmTransactionReducer(mockState, {
+ type: FETCH_DATA_START,
}),
{
- fetchingMethodData: false,
+ ...mockState.confirmTransaction,
+ fetchingData: true,
}
)
})
- it('should clear confirmTransaction when receiving a FETCH_METHOD_DATA_END action', () => {
+ it('should set fetchingData to false when receiving a FETCH_DATA_END action', () => {
+ assert.deepEqual(
+ ConfirmTransactionReducer({ confirmTransaction: { fetchingData: true } }, {
+ type: FETCH_DATA_END,
+ }),
+ {
+ fetchingData: false,
+ }
+ )
+ })
+
+ it('should clear confirmTransaction when receiving a FETCH_DATA_END action', () => {
assert.deepEqual(
ConfirmTransactionReducer(mockState, {
type: CLEAR_CONFIRM_TRANSACTION,
@@ -460,24 +477,24 @@ describe('Confirm Transaction Duck', () => {
)
})
- it('should create an action to set fetchingMethodData to true', () => {
+ it('should create an action to set fetchingData to true', () => {
const expectedAction = {
- type: FETCH_METHOD_DATA_START,
+ type: FETCH_DATA_START,
}
assert.deepEqual(
- actions.setFetchingMethodData(true),
+ actions.setFetchingData(true),
expectedAction
)
})
- it('should create an action to set fetchingMethodData to false', () => {
+ it('should create an action to set fetchingData to false', () => {
const expectedAction = {
- type: FETCH_METHOD_DATA_END,
+ type: FETCH_DATA_END,
}
assert.deepEqual(
- actions.setFetchingMethodData(false),
+ actions.setFetchingData(false),
expectedAction
)
})
@@ -495,6 +512,18 @@ describe('Confirm Transaction Duck', () => {
})
describe('Thunk actions', done => {
+ beforeEach(() => {
+ global.eth = {
+ getCode: sinon.stub().callsFake(
+ address => Promise.resolve(address && address.match(/isContract/) ? 'not-0x' : '0x')
+ ),
+ }
+ })
+
+ afterEach(() => {
+ global.eth.getCode.resetHistory()
+ })
+
it('updates txData and gas on an existing transaction in confirmTransaction', () => {
const mockState = {
metamask: {
@@ -505,7 +534,7 @@ describe('Confirm Transaction Duck', () => {
ethTransactionAmount: '1',
ethTransactionFee: '0.000021',
ethTransactionTotal: '1.000021',
- fetchingMethodData: false,
+ fetchingData: false,
fiatTransactionAmount: '469.26',
fiatTransactionFee: '0.01',
fiatTransactionTotal: '469.27',
@@ -581,7 +610,7 @@ describe('Confirm Transaction Duck', () => {
ethTransactionAmount: '1',
ethTransactionFee: '0.000021',
ethTransactionTotal: '1.000021',
- fetchingMethodData: false,
+ fetchingData: false,
fiatTransactionAmount: '469.26',
fiatTransactionFee: '0.01',
fiatTransactionTotal: '469.27',
@@ -667,6 +696,7 @@ describe('Confirm Transaction Duck', () => {
.then(() => {
const storeActions = store.getActions()
assert.equal(storeActions.length, expectedActions.length)
+
storeActions.forEach((action, index) => assert.equal(action.type, expectedActions[index]))
done()
})
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index 76e80a8ac..bcac22500 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -1,15 +1,8 @@
import currencyFormatter from 'currency-formatter'
import currencies from 'currency-formatter/currencies'
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
import ethUtil from 'ethereumjs-util'
import BigNumber from 'bignumber.js'
-abiDecoder.addABI(abi)
-
-import MethodRegistry from 'eth-method-registry'
-const registry = new MethodRegistry({ provider: global.ethereumProvider })
-
import {
conversionUtil,
addCurrencies,
@@ -19,22 +12,6 @@ import {
import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-export function getTokenData (data = {}) {
- return abiDecoder.decodeMethod(data)
-}
-
-export async function getMethodData (data = {}) {
- const prefixedData = ethUtil.addHexPrefix(data)
- const fourBytePrefix = prefixedData.slice(0, 10)
- const sig = await registry.lookup(fourBytePrefix)
- const parsedResult = registry.parse(sig)
-
- return {
- name: parsedResult.name,
- params: parsedResult.args,
- }
-}
-
export function increaseLastGasPrice (lastGasPrice) {
return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
multiplicandBase: 16,
@@ -76,11 +53,12 @@ export function addFiat (...args) {
})
}
-export function getTransactionAmount ({
+export function getValueFromWeiHex ({
value,
toCurrency,
conversionRate,
numberOfDecimals,
+ toDenomination,
}) {
return conversionUtil(value, {
fromNumericBase: 'hex',
@@ -89,6 +67,7 @@ export function getTransactionAmount ({
toCurrency,
numberOfDecimals,
fromDenomination: 'WEI',
+ toDenomination,
conversionRate,
})
}
diff --git a/ui/app/helpers/confirm-transaction/util.test.js b/ui/app/helpers/confirm-transaction/util.test.js
index a9c8fae34..4c1a3e16b 100644
--- a/ui/app/helpers/confirm-transaction/util.test.js
+++ b/ui/app/helpers/confirm-transaction/util.test.js
@@ -92,9 +92,9 @@ describe('Confirm Transaction utils', () => {
})
})
- describe('getTransactionAmount', () => {
+ describe('getValueFromWeiHex', () => {
it('should get the transaction amount in ETH', () => {
- const ethTransactionAmount = utils.getTransactionAmount({
+ const ethTransactionAmount = utils.getValueFromWeiHex({
value: '0xde0b6b3a7640000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
})
@@ -102,7 +102,7 @@ describe('Confirm Transaction utils', () => {
})
it('should get the transaction amount in fiat', () => {
- const fiatTransactionAmount = utils.getTransactionAmount({
+ const fiatTransactionAmount = utils.getValueFromWeiHex({
value: '0xde0b6b3a7640000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
})
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
new file mode 100644
index 000000000..5204faa1f
--- /dev/null
+++ b/ui/app/helpers/conversions.util.js
@@ -0,0 +1,51 @@
+import { conversionUtil } from '../conversion-util'
+import { ETH, GWEI, WEI } from '../constants/common'
+
+export function hexToDecimal (hexValue) {
+ return conversionUtil(hexValue, {
+ fromNumericBase: 'hex',
+ toNumericBase: 'dec',
+ })
+}
+
+export function getEthConversionFromWeiHex ({ value, conversionRate, numberOfDecimals = 6 }) {
+ const denominations = [ETH, GWEI, WEI]
+
+ let nonZeroDenomination
+
+ for (let i = 0; i < denominations.length; i++) {
+ const convertedValue = getValueFromWeiHex({
+ value,
+ conversionRate,
+ toCurrency: ETH,
+ numberOfDecimals,
+ toDenomination: denominations[i],
+ })
+
+ if (convertedValue !== '0' || i === denominations.length - 1) {
+ nonZeroDenomination = `${convertedValue} ${denominations[i]}`
+ break
+ }
+ }
+
+ return nonZeroDenomination
+}
+
+export function getValueFromWeiHex ({
+ value,
+ toCurrency,
+ conversionRate,
+ numberOfDecimals,
+ toDenomination,
+}) {
+ return conversionUtil(value, {
+ fromNumericBase: 'hex',
+ toNumericBase: 'dec',
+ fromCurrency: ETH,
+ toCurrency,
+ numberOfDecimals,
+ fromDenomination: WEI,
+ toDenomination,
+ conversionRate,
+ })
+}
diff --git a/ui/app/helpers/tests/transactions.util.test.js b/ui/app/helpers/tests/transactions.util.test.js
new file mode 100644
index 000000000..103a84a8c
--- /dev/null
+++ b/ui/app/helpers/tests/transactions.util.test.js
@@ -0,0 +1,22 @@
+import * as utils from '../transactions.util'
+import assert from 'assert'
+
+describe('Transactions utils', () => {
+ describe('getTokenData', () => {
+ it('should return token data', () => {
+ const tokenData = utils.getTokenData('0xa9059cbb00000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000004e20')
+ assert.ok(tokenData)
+ const { name, params } = tokenData
+ assert.equal(name, 'transfer')
+ const [to, value] = params
+ assert.equal(to.name, '_to')
+ assert.equal(to.type, 'address')
+ assert.equal(value.name, '_value')
+ assert.equal(value.type, 'uint256')
+ })
+
+ it('should not throw errors when called without arguments', () => {
+ assert.doesNotThrow(() => utils.getTokenData())
+ })
+ })
+})
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
new file mode 100644
index 000000000..54bb3bcb9
--- /dev/null
+++ b/ui/app/helpers/transactions.util.js
@@ -0,0 +1,117 @@
+import ethUtil from 'ethereumjs-util'
+import MethodRegistry from 'eth-method-registry'
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
+
+import {
+ TOKEN_METHOD_TRANSFER,
+ TOKEN_METHOD_APPROVE,
+ TOKEN_METHOD_TRANSFER_FROM,
+ SEND_ETHER_ACTION_KEY,
+ DEPLOY_CONTRACT_ACTION_KEY,
+ APPROVE_ACTION_KEY,
+ SEND_TOKEN_ACTION_KEY,
+ TRANSFER_FROM_ACTION_KEY,
+ SIGNATURE_REQUEST_KEY,
+ UNKNOWN_FUNCTION_KEY,
+} from '../constants/transactions'
+
+import { addCurrencies } from '../conversion-util'
+
+abiDecoder.addABI(abi)
+
+export function getTokenData (data = '') {
+ return abiDecoder.decodeMethod(data)
+}
+
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
+export async function getMethodData (data = '') {
+ const prefixedData = ethUtil.addHexPrefix(data)
+ const fourBytePrefix = prefixedData.slice(0, 10)
+ const sig = await registry.lookup(fourBytePrefix)
+ const parsedResult = registry.parse(sig)
+
+ return {
+ name: parsedResult.name,
+ params: parsedResult.args,
+ }
+}
+
+export function isConfirmDeployContract (txData = {}) {
+ const { txParams = {} } = txData
+ return !txParams.to
+}
+
+export async function getTransactionActionKey (transaction, methodData) {
+ const { txParams: { data, to } = {}, msgParams } = transaction
+
+ if (msgParams) {
+ return SIGNATURE_REQUEST_KEY
+ }
+
+ if (isConfirmDeployContract(transaction)) {
+ return DEPLOY_CONTRACT_ACTION_KEY
+ }
+
+ if (data) {
+ const toSmartContract = await isSmartContractAddress(to)
+
+ if (!toSmartContract) {
+ return SEND_ETHER_ACTION_KEY
+ }
+
+ const { name } = methodData
+ const methodName = name && name.toLowerCase()
+
+ if (!methodName) {
+ return UNKNOWN_FUNCTION_KEY
+ }
+
+ switch (methodName) {
+ case TOKEN_METHOD_TRANSFER:
+ return SEND_TOKEN_ACTION_KEY
+ case TOKEN_METHOD_APPROVE:
+ return APPROVE_ACTION_KEY
+ case TOKEN_METHOD_TRANSFER_FROM:
+ return TRANSFER_FROM_ACTION_KEY
+ default:
+ return name
+ }
+ } else {
+ return SEND_ETHER_ACTION_KEY
+ }
+}
+
+export function getLatestSubmittedTxWithNonce (transactions = [], nonce = '0x0') {
+ if (!transactions.length) {
+ return {}
+ }
+
+ return transactions.reduce((acc, current) => {
+ const { submittedTime, txParams: { nonce: currentNonce } = {} } = current
+
+ if (currentNonce === nonce) {
+ return acc.submittedTime
+ ? submittedTime > acc.submittedTime ? current : acc
+ : current
+ } else {
+ return acc
+ }
+ }, {})
+}
+
+export async function isSmartContractAddress (address) {
+ const code = await global.eth.getCode(address)
+ return code && code !== '0x'
+}
+
+export function sumHexes (...args) {
+ const total = args.reduce((acc, base) => {
+ return addCurrencies(acc, base, {
+ toNumericBase: 'hex',
+ })
+ })
+
+ return ethUtil.addHexPrefix(total)
+}
diff --git a/ui/app/higher-order-components/with-method-data/index.js b/ui/app/higher-order-components/with-method-data/index.js
new file mode 100644
index 000000000..f511e1ae7
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/index.js
@@ -0,0 +1 @@
+export { default } from './with-method-data.component'
diff --git a/ui/app/higher-order-components/with-method-data/with-method-data.component.js b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
new file mode 100644
index 000000000..fed7d9865
--- /dev/null
+++ b/ui/app/higher-order-components/with-method-data/with-method-data.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getMethodData } from '../../helpers/transactions.util'
+
+export default function withMethodData (WrappedComponent) {
+ return class MethodDataWrappedComponent extends PureComponent {
+ static propTypes = {
+ transaction: PropTypes.object,
+ }
+
+ static defaultProps = {
+ transaction: {},
+ }
+
+ state = {
+ methodData: {},
+ done: false,
+ error: null,
+ }
+
+ componentDidMount () {
+ this.fetchMethodData()
+ }
+
+ async fetchMethodData () {
+ const { transaction } = this.props
+ const { txParams: { data = '' } = {} } = transaction
+
+ if (data) {
+ try {
+ const methodData = await getMethodData(data)
+ this.setState({ methodData, done: true })
+ } catch (error) {
+ this.setState({ done: true, error })
+ }
+ } else {
+ this.setState({ done: true })
+ }
+ }
+
+ render () {
+ const { methodData, done, error } = this.state
+
+ return (
+
+
+