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

First pass at revision requests

Browse Source
This commit is contained in:
Frances Pangilinan 2016-12-16 10:33:36 -08:00
parent da9349fe63
commit 6e78494846
13 changed files with 239 additions and 595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/scripts/background.js
View File

@ -17,7 +17,7 @@ const controller = new MetamaskController({
// User confirmation callbacks: // User confirmation callbacks:
showUnconfirmedMessage: triggerUi, showUnconfirmedMessage: triggerUi,
unlockAccountMessage: triggerUi, unlockAccountMessage: triggerUi,
showUnconfirmedTx: triggerUi, showUnapprovedTx: triggerUi,
// Persistence Methods: // Persistence Methods:
setData, setData,
loadData, loadData,
@ -101,7 +101,7 @@ txManager.on('update', updateBadge)
function updateBadge () { function updateBadge () {
var label = '' var label = ''
var unconfTxLen = controller.txManager.unConftxCount var unconfTxLen = controller.txManager.unconfTxCount
var unconfMsgs = messageManager.unconfirmedMsgs() var unconfMsgs = messageManager.unconfirmedMsgs()
var unconfMsgLen = Object.keys(unconfMsgs).length var unconfMsgLen = Object.keys(unconfMsgs).length
var count = unconfTxLen + unconfMsgLen var count = unconfTxLen + unconfMsgLen
@ -112,16 +112,6 @@ function updateBadge () {
extension.browserAction.setBadgeBackgroundColor({ color: '#506F8B' }) extension.browserAction.setBadgeBackgroundColor({ color: '#506F8B' })
} }
// txManger :: tx approvals and rejection cb's
txManager.on('signed', function (txId) {
this.execOnTxDoneCb(txId, true)
})
txManager.on('rejected', function (txId) {
this.execOnTxDoneCb(txId, false)
})
// data :: setters/getters // data :: setters/getters
function loadData () { function loadData () {

101
app/scripts/keyring-controller.js
View File

@ -100,8 +100,6 @@ module.exports = class KeyringController extends EventEmitter {
isInitialized: (!!wallet || !!vault), isInitialized: (!!wallet || !!vault),
isUnlocked: Boolean(this.password), isUnlocked: Boolean(this.password),
isDisclaimerConfirmed: this.configManager.getConfirmedDisclaimer(), // AUDIT this.configManager.getConfirmedDisclaimer(), isDisclaimerConfirmed: this.configManager.getConfirmedDisclaimer(), // AUDIT this.configManager.getConfirmedDisclaimer(),
transactions: this.txManager.getTxList(),
unconfTxs: this.txManager.getUnapprovedTxList(),
unconfMsgs: messageManager.unconfirmedMsgs(), unconfMsgs: messageManager.unconfirmedMsgs(),
messages: messageManager.getMsgList(), messages: messageManager.getMsgList(),
selectedAccount: address, selectedAccount: address,
@ -319,89 +317,10 @@ module.exports = class KeyringController extends EventEmitter {
} }
// SIGNING RELATED METHODS // SIGNING METHODS
// //
// SIGN, SUBMIT TX, CANCEL, AND APPROVE. // This method signs tx and returns a promise for
// THIS SECTION INVOLVES THE REQUEST, STORING, AND SIGNING OF DATA // TX Manager to update the state after signing
// WITH THE KEYS STORED IN THIS CONTROLLER.
// Add Unconfirmed Transaction
// @object txParams
// @function onTxDoneCb
// @function cb
//
// Calls back `cb` with @object txData = { txParams }
// Calls back `onTxDoneCb` with `true` or an `error` depending on result.
//
// Prepares the given `txParams` for final confirmation and approval.
// Estimates gas and other preparatory steps.
// Caches the requesting Dapp's callback, `onTxDoneCb`, for resolution later.
addUnconfirmedTransaction (txParams, onTxDoneCb, cb) {
const configManager = this.configManager
const txManager = this.txManager
// create txData obj with parameters and meta data
var time = (new Date()).getTime()
var txId = createId()
txParams.metamaskId = txId
txParams.metamaskNetworkId = this.getNetwork()
var txData = {
id: txId,
txParams: txParams,
time: time,
status: 'unapproved',
gasMultiplier: configManager.getGasMultiplier() || 1,
metamaskNetworkId: this.getNetwork(),
}
// keep the onTxDoneCb around for after approval/denial (requires user interaction)
// This onTxDoneCb fires completion to the Dapp's write operation.
txManager.txProviderUtils.analyzeGasUsage(txData, this.txDidComplete.bind(this, txData, onTxDoneCb, cb))
// calculate metadata for tx
}
txDidComplete (txData, onTxDoneCb, cb, err) {
if (err) return cb(err)
const txManager = this.txManager
txManager.addTx(txData, onTxDoneCb)
// signal update
this.emit('update')
// signal completion of add tx
cb(null, txData)
}
// Cancel Transaction
// @string txId
// @function cb
//
// Calls back `cb` with no error if provided.
//
// Forgets any tx matching `txId`.
cancelTransaction (txId, cb) {
const txManager = this.txManager
txManager.setTxStatusRejected(txId)
if (cb && typeof cb === 'function') {
cb()
}
}
// Approve Transaction
// @string txId
// @function cb
//
// Calls back `cb` with no error always.
//
// Attempts to sign a Transaction with `txId`
// and submit it to the blockchain.
//
// Calls back the cached Dapp's confirmation callback, also.
approveTransaction (txId, cb) {
const txManager = this.txManager
txManager.setTxStatusSigned(txId)
this.emit('update')
cb()
}
signTransaction (txParams, cb) { signTransaction (txParams, cb) {
try { try {
const address = normalize(txParams.from) const address = normalize(txParams.from)
@ -420,20 +339,10 @@ module.exports = class KeyringController extends EventEmitter {
txParams.data = normalize(txParams.data) txParams.data = normalize(txParams.data)
txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas) txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas)
txParams.nonce = normalize(txParams.nonce) txParams.nonce = normalize(txParams.nonce)
const tx = new Transaction(txParams) const tx = new Transaction(txParams)
return keyring.signTransaction(address, tx) return keyring.signTransaction(address, tx)
}) }).then((tx) => {
.then((tx) => { return {tx, txParams, cb}
// Add the tx hash to the persisted meta-tx object
var txHash = ethUtil.bufferToHex(tx.hash())
var metaTx = this.txManager.getTx(txParams.metamaskId)
metaTx.hash = txHash
this.txManager.updateTx(metaTx)
// return raw serialized tx
var rawTx = ethUtil.bufferToHex(tx.serialize())
cb(null, rawTx)
}) })
} catch (e) { } catch (e) {
cb(e) cb(e)

3
app/scripts/lib/config-manager.js
View File

@ -8,7 +8,6 @@ const normalize = require('./sig-util').normalize
const TESTNET_RPC = MetamaskConfig.network.testnet const TESTNET_RPC = MetamaskConfig.network.testnet
const MAINNET_RPC = MetamaskConfig.network.mainnet const MAINNET_RPC = MetamaskConfig.network.mainnet
const MORDEN_RPC = MetamaskConfig.network.morden const MORDEN_RPC = MetamaskConfig.network.morden
const txLimit = 40
/* The config-manager is a convenience object /* The config-manager is a convenience object
* wrapping a pojo-migrator. * wrapping a pojo-migrator.
@ -19,8 +18,6 @@ const txLimit = 40
*/ */
module.exports = ConfigManager module.exports = ConfigManager
function ConfigManager (opts) { function ConfigManager (opts) {
this.txLimit = txLimit
// ConfigManager is observable and will emit updates // ConfigManager is observable and will emit updates
this._subs = [] this._subs = []

261
app/scripts/lib/idStore.js
View File

@ -1,19 +1,12 @@
const EventEmitter = require('events').EventEmitter const EventEmitter = require('events').EventEmitter
const inherits = require('util').inherits const inherits = require('util').inherits
const async = require('async')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
const EthQuery = require('eth-query')
const KeyStore = require('eth-lightwallet').keystore const KeyStore = require('eth-lightwallet').keystore
const clone = require('clone') const clone = require('clone')
const extend = require('xtend') const extend = require('xtend')
const createId = require('./random-id')
const ethBinToOps = require('eth-bin-to-ops')
const autoFaucet = require('./auto-faucet') const autoFaucet = require('./auto-faucet')
const messageManager = require('./message-manager')
const DEFAULT_RPC = 'https://testrpc.metamask.io/' const DEFAULT_RPC = 'https://testrpc.metamask.io/'
const IdManagement = require('./id-management') const IdManagement = require('./id-management')
const TxManager = require('../transaction-manager')
module.exports = IdentityStore module.exports = IdentityStore
@ -36,15 +29,7 @@ function IdentityStore (opts = {}) {
selectedAddress: null, selectedAddress: null,
identities: {}, identities: {},
} }
// not part of serilized metamask state - only kept in memory // not part of serilized metamask state - only kept in memory
this.txManager = new TxManager({
TxListFromStore: opts.configManager.getTxList(),
setTxList: opts.configManager.setTxList.bind(opts.configManager),
txLimit: 40,
})
this._unconfTxCbs = {}
this._unconfMsgCbs = {}
} }
// //
@ -94,7 +79,6 @@ IdentityStore.prototype.recoverFromSeed = function (password, seed, cb) {
IdentityStore.prototype.setStore = function (store) { IdentityStore.prototype.setStore = function (store) {
this._ethStore = store this._ethStore = store
this.txManager.setProvider(this._ethStore._query.currentProvider)
} }
IdentityStore.prototype.clearSeedWordCache = function (cb) { IdentityStore.prototype.clearSeedWordCache = function (cb) {
@ -105,17 +89,12 @@ IdentityStore.prototype.clearSeedWordCache = function (cb) {
IdentityStore.prototype.getState = function () { IdentityStore.prototype.getState = function () {
const configManager = this.configManager const configManager = this.configManager
const TxManager = this.txManager
var seedWords = this.getSeedIfUnlocked() var seedWords = this.getSeedIfUnlocked()
return clone(extend(this._currentState, { return clone(extend(this._currentState, {
isInitialized: !!configManager.getWallet() && !seedWords, isInitialized: !!configManager.getWallet() && !seedWords,
isUnlocked: this._isUnlocked(), isUnlocked: this._isUnlocked(),
seedWords: seedWords, seedWords: seedWords,
isDisclaimerConfirmed: configManager.getConfirmedDisclaimer(), isDisclaimerConfirmed: configManager.getConfirmedDisclaimer(),
unconfTxs: TxManager.getUnapprovedTxList(),
transactions: TxManager.getTxList(),
unconfMsgs: messageManager.unconfirmedMsgs(),
messages: messageManager.getMsgList(),
selectedAddress: configManager.getSelectedAccount(), selectedAddress: configManager.getSelectedAccount(),
shapeShiftTxList: configManager.getShapeShiftTxList(), shapeShiftTxList: configManager.getShapeShiftTxList(),
currentFiat: configManager.getCurrentFiat(), currentFiat: configManager.getCurrentFiat(),
@ -214,245 +193,6 @@ IdentityStore.prototype.exportAccount = function (address, cb) {
cb(null, privateKey) cb(null, privateKey)
} }
//
// Transactions
//
// comes from dapp via zero-client hooked-wallet provider
IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDoneCb, cb) {
const configManager = this.configManager
var self = this
// create txData obj with parameters and meta data
var time = (new Date()).getTime()
var txId = createId()
txParams.metamaskId = txId
txParams.metamaskNetworkId = self._currentState.network
var txData = {
id: txId,
txParams: txParams,
time: time,
status: 'unconfirmed',
gasMultiplier: configManager.getGasMultiplier() || 1,
}
console.log('addUnconfirmedTransaction:', txData)
// keep the onTxDoneCb around for after approval/denial (requires user interaction)
// This onTxDoneCb fires completion to the Dapp's write operation.
self._unconfTxCbs[txId] = onTxDoneCb
var provider = self._ethStore._query.currentProvider
var query = new EthQuery(provider)
// calculate metadata for tx
async.parallel([
analyzeForDelegateCall,
estimateGas,
], didComplete)
// perform static analyis on the target contract code
function analyzeForDelegateCall (cb) {
if (txParams.to) {
query.getCode(txParams.to, (err, result) => {
if (err) return cb(err.message || err)
var containsDelegateCall = self.checkForDelegateCall(result)
txData.containsDelegateCall = containsDelegateCall
cb()
})
} else {
cb()
}
}
function estimateGas (cb) {
var estimationParams = extend(txParams)
query.getBlockByNumber('latest', true, function(err, block){
if (err) return cb(err)
// check if gasLimit is already specified
const gasLimitSpecified = Boolean(txParams.gas)
// if not, fallback to block gasLimit
if (!gasLimitSpecified) {
estimationParams.gas = block.gasLimit
}
// run tx, see if it will OOG
query.estimateGas(estimationParams, function(err, estimatedGasHex){
if (err) return cb(err.message || err)
// all gas used - must be an error
if (estimatedGasHex === estimationParams.gas) {
txData.simulationFails = true
txData.estimatedGas = estimatedGasHex
txData.txParams.gas = estimatedGasHex
cb()
return
}
// otherwise, did not use all gas, must be ok
// if specified gasLimit and no error, we're done
if (gasLimitSpecified) {
txData.estimatedGas = txParams.gas
cb()
return
}
// try adding an additional gas buffer to our estimation for safety
const estimatedGasBn = new BN(ethUtil.stripHexPrefix(estimatedGasHex), 16)
const blockGasLimitBn = new BN(ethUtil.stripHexPrefix(block.gasLimit), 16)
const estimationWithBuffer = self.addGasBuffer(estimatedGasBn)
// added gas buffer is too high
if (estimationWithBuffer.gt(blockGasLimitBn)) {
txData.estimatedGas = estimatedGasHex
txData.txParams.gas = estimatedGasHex
// added gas buffer is safe
} else {
const gasWithBufferHex = ethUtil.intToHex(estimationWithBuffer)
txData.estimatedGas = gasWithBufferHex
txData.txParams.gas = gasWithBufferHex
}
cb()
return
})
})
}
function didComplete (err) {
if (err) return cb(err.message || err)
configManager.addTx(txData)
// signal update
self._didUpdate()
// signal completion of add tx
cb(null, txData)
}
}
IdentityStore.prototype.checkForDelegateCall = function (codeHex) {
const code = ethUtil.toBuffer(codeHex)
if (code !== '0x') {
const ops = ethBinToOps(code)
const containsDelegateCall = ops.some((op) => op.name === 'DELEGATECALL')
return containsDelegateCall
} else {
return false
}
}
IdentityStore.prototype.addGasBuffer = function (gasBn) {
// add 20% to specified gas
const gasBuffer = gasBn.div(new BN('5', 10))
const gasWithBuffer = gasBn.add(gasBuffer)
return gasWithBuffer
}
// comes from metamask ui
IdentityStore.prototype.approveTransaction = function (txId, cb) {
const configManager = this.configManager
var approvalCb = this._unconfTxCbs[txId] || noop
// accept tx
cb()
approvalCb(null, true)
// clean up
configManager.confirmTx(txId)
delete this._unconfTxCbs[txId]
this._didUpdate()
}
// comes from metamask ui
IdentityStore.prototype.cancelTransaction = function (txId) {
const configManager = this.configManager
var approvalCb = this._unconfTxCbs[txId] || noop
// reject tx
approvalCb(null, false)
// clean up
configManager.rejectTx(txId)
delete this._unconfTxCbs[txId]
this._didUpdate()
}
// performs the actual signing, no autofill of params
IdentityStore.prototype.signTransaction = function (txParams, cb) {
try {
console.log('signing tx...', txParams)
var rawTx = this._idmgmt.signTx(txParams)
cb(null, rawTx)
} catch (err) {
cb(err)
}
}
//
// Messages
//
// comes from dapp via zero-client hooked-wallet provider
IdentityStore.prototype.addUnconfirmedMessage = function (msgParams, cb) {
// create txData obj with parameters and meta data
var time = (new Date()).getTime()
var msgId = createId()
var msgData = {
id: msgId,
msgParams: msgParams,
time: time,
status: 'unconfirmed',
}
messageManager.addMsg(msgData)
console.log('addUnconfirmedMessage:', msgData)
// keep the cb around for after approval (requires user interaction)
// This cb fires completion to the Dapp's write operation.
this._unconfMsgCbs[msgId] = cb
// signal update
this._didUpdate()
return msgId
}
// comes from metamask ui
IdentityStore.prototype.approveMessage = function (msgId, cb) {
var approvalCb = this._unconfMsgCbs[msgId] || noop
// accept msg
cb()
approvalCb(null, true)
// clean up
messageManager.confirmMsg(msgId)
delete this._unconfMsgCbs[msgId]
this._didUpdate()
}
// comes from metamask ui
IdentityStore.prototype.cancelMessage = function (msgId) {
var approvalCb = this._unconfMsgCbs[msgId] || noop
// reject tx
approvalCb(null, false)
// clean up
messageManager.rejectMsg(msgId)
delete this._unconfTxCbs[msgId]
this._didUpdate()
}
// performs the actual signing, no autofill of params
IdentityStore.prototype.signMessage = function (msgParams, cb) {
try {
console.log('signing msg...', msgParams.data)
var rawMsg = this._idmgmt.signMsg(msgParams.from, msgParams.data)
if ('metamaskId' in msgParams) {
var id = msgParams.metamaskId
delete msgParams.metamaskId
this.approveMessage(id, cb)
} else {
cb(null, rawMsg)
}
} catch (err) {
cb(err)
}
}
//
// private // private
// //
@ -607,4 +347,3 @@ IdentityStore.prototype._autoFaucet = function () {
// util // util
function noop () {}

31
app/scripts/lib/provider-utils.js → app/scripts/lib/tx-utils.js
View File

@ -2,7 +2,12 @@ const async = require('async')
const EthQuery = require('eth-query') const EthQuery = require('eth-query')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
const ethBinToOps = require('eth-bin-to-ops')
/*
tx-utils are utility methods for Transaction manager
its passed a provider and that is passed to ethquery
and used to do things like calculate gas of a tx.
*/
module.exports = class txProviderUtils { module.exports = class txProviderUtils {
constructor (provider) { constructor (provider) {
@ -21,26 +26,6 @@ module.exports = class txProviderUtils {
}) })
} }
// perform static analyis on the target contract code
analyzeForDelegateCall (txParams, cb) {
if (txParams.to) {
this.query.getCode(txParams.to, function (err, result) {
if (err) return cb(err)
var code = ethUtil.toBuffer(result)
if (code !== '0x') {
var ops = ethBinToOps(code)
var containsDelegateCall = ops.some((op) => op.name === 'DELEGATECALL')
cb(containsDelegateCall)
} else {
cb()
}
})
} else {
cb()
}
}
estimateTxGas (txData, blockGasLimitHex, cb) { estimateTxGas (txData, blockGasLimitHex, cb) {
const txParams = txData.txParams const txParams = txData.txParams
// check if gasLimit is already specified // check if gasLimit is already specified
@ -62,10 +47,6 @@ module.exports = class txProviderUtils {
cb() cb()
} }
handleFork (block) {
}
setTxGas (txData, blockGasLimitHex, cb) { setTxGas (txData, blockGasLimitHex, cb) {
const txParams = txData.txParams const txParams = txData.txParams
// if OOG, nothing more to do // if OOG, nothing more to do

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

@ -11,7 +11,6 @@ const extension = require('./lib/extension')
const autoFaucet = require('./lib/auto-faucet') const autoFaucet = require('./lib/auto-faucet')
const nodeify = require('./lib/nodeify') const nodeify = require('./lib/nodeify')
module.exports = class MetamaskController { module.exports = class MetamaskController {
constructor (opts) { constructor (opts) {
@ -19,12 +18,6 @@ module.exports = class MetamaskController {
this.opts = opts this.opts = opts
this.listeners = [] this.listeners = []
this.configManager = new ConfigManager(opts) this.configManager = new ConfigManager(opts)
this.txManager = new TxManager({
TxListFromStore: this.configManager.getTxList(),
txLimit: this.configManager.txLimit,
setTxList: this.configManager.setTxList.bind(this.configManager),
})
this.keyringController = new KeyringController({ this.keyringController = new KeyringController({
configManager: this.configManager, configManager: this.configManager,
txManager: this.txManager, txManager: this.txManager,
@ -33,9 +26,17 @@ module.exports = class MetamaskController {
this.provider = this.initializeProvider(opts) this.provider = this.initializeProvider(opts)
this.ethStore = new EthStore(this.provider) this.ethStore = new EthStore(this.provider)
this.keyringController.setStore(this.ethStore) this.keyringController.setStore(this.ethStore)
this.txManager.setProvider(this.provider)
this.getNetwork() this.getNetwork()
this.messageManager = messageManager this.messageManager = messageManager
this.txManager = new TxManager({
txList: this.configManager.getTxList(),
txHistoryLimit: 40,
setTxList: this.configManager.setTxList.bind(this.configManager),
getGasMultiplier: this.configManager.getGasMultiplier.bind(this.configManager),
getNetwork: this.getStateNetwork.bind(this),
provider: this.provider,
blockTracker: this.provider,
})
this.publicConfigStore = this.initPublicConfigStore() this.publicConfigStore = this.initPublicConfigStore()
var currentFiat = this.configManager.getCurrentFiat() || 'USD' var currentFiat = this.configManager.getCurrentFiat() || 'USD'
@ -52,7 +53,8 @@ module.exports = class MetamaskController {
this.state, this.state,
this.ethStore.getState(), this.ethStore.getState(),
this.configManager.getConfig(), this.configManager.getConfig(),
this.keyringController.getState() this.keyringController.getState(),
this.txManager.getState()
) )
} }
@ -85,14 +87,14 @@ module.exports = class MetamaskController {
exportAccount: nodeify(keyringController.exportAccount).bind(keyringController), exportAccount: nodeify(keyringController.exportAccount).bind(keyringController),
// signing methods // signing methods
approveTransaction: keyringController.approveTransaction.bind(keyringController), approveTransaction: txManager.approveTransaction.bind(txManager),
cancelTransaction: keyringController.cancelTransaction.bind(keyringController), cancelTransaction: txManager.cancelTransaction.bind(txManager),
signMessage: keyringController.signMessage.bind(keyringController), signMessage: keyringController.signMessage.bind(keyringController),
cancelMessage: keyringController.cancelMessage.bind(keyringController), cancelMessage: keyringController.cancelMessage.bind(keyringController),
// forward directly to txManager // forward directly to txManager
getUnapprovedTxList: txManager.getTxList.bind(txManager), getUnapprovedTxList: txManager.getUnapprovedTxList.bind(txManager),
getFilterdTxList: txManager.getFilterdTxList.bind(txManager), getFilteredTxList: txManager.getFilteredTxList.bind(txManager),
// coinbase // coinbase
buyEth: this.buyEth.bind(this), buyEth: this.buyEth.bind(this),
// shapeshift // shapeshift
@ -150,7 +152,8 @@ module.exports = class MetamaskController {
// tx signing // tx signing
approveTransaction: this.newUnsignedTransaction.bind(this), approveTransaction: this.newUnsignedTransaction.bind(this),
signTransaction: (...args) => { signTransaction: (...args) => {
keyringController.signTransaction(...args) var signedTxPromise = keyringController.signTransaction(...args)
this.txManager.resolveSignedTransaction(signedTxPromise)
this.sendUpdate() this.sendUpdate()
}, },
@ -166,7 +169,6 @@ module.exports = class MetamaskController {
var web3 = new Web3(provider) var web3 = new Web3(provider)
this.web3 = web3 this.web3 = web3
keyringController.web3 = web3 keyringController.web3 = web3
this.txManager.web3 = web3
provider.on('block', this.processBlock.bind(this)) provider.on('block', this.processBlock.bind(this))
provider.on('error', this.getNetwork.bind(this)) provider.on('error', this.getNetwork.bind(this))
@ -220,13 +222,13 @@ module.exports = class MetamaskController {
} }
newUnsignedTransaction (txParams, onTxDoneCb) { newUnsignedTransaction (txParams, onTxDoneCb) {
const keyringController = this.keyringController const txManager = this.txManager
const err = this.enforceTxValidations(txParams) const err = this.enforceTxValidations(txParams)
if (err) return onTxDoneCb(err) if (err) return onTxDoneCb(err)
keyringController.addUnconfirmedTransaction(txParams, onTxDoneCb, (err, txData) => { txManager.addUnapprovedTransaction(txParams, onTxDoneCb, (err, txData) => {
if (err) return onTxDoneCb(err) if (err) return onTxDoneCb(err)
this.sendUpdate() this.sendUpdate()
this.opts.showUnconfirmedTx(txParams, txData, onTxDoneCb) this.opts.showUnapprovedTx(txParams, txData, onTxDoneCb)
}) })
} }

247
app/scripts/transaction-manager.js
View File

@ -1,15 +1,31 @@
const EventEmitter = require('events') const EventEmitter = require('events')
const extend = require('xtend') const extend = require('xtend')
const TxProviderUtil = require('./lib/provider-utils') const ethUtil = require('ethereumjs-util')
const TxProviderUtil = require('./lib/tx-utils')
const createId = require('./lib/random-id')
module.exports = class TransactionManager extends EventEmitter { module.exports = class TransactionManager extends EventEmitter {
constructor (opts) { constructor (opts) {
super() super()
this.txList = opts.TxListFromStore || [] this.txList = opts.txList || []
this._persistTxList = opts.setTxList this._setTxList = opts.setTxList
this._unconfTxCbs = {} this._unconfTxCbs = {}
this.txLimit = opts.txLimit this.txHistoryLimit = opts.txHistoryLimit
// txManager :: tx approvals and rejection cb's
this.provider = opts.provider this.provider = opts.provider
this.blockTracker = opts.blockTracker
this.txProviderUtils = new TxProviderUtil(this.provider)
this.blockTracker.on('block', this.checkForTxInBlock.bind(this))
this.getGasMultiplier = opts.getGasMultiplier
this.getNetwork = opts.getNetwork
}
getState () {
return {
transactions: this.getTxList(),
unconfTxs: this.getUnapprovedTxList(),
}
} }
// Returns the tx list // Returns the tx list
@ -17,49 +33,49 @@ module.exports = class TransactionManager extends EventEmitter {
return this.txList return this.txList
} }
// Saves the new/updated txList.
// Function is intended only for internal use
_saveTxList (txList) {
this.txList = txList
this._persistTxList(txList)
}
// Adds a tx to the txlist // Adds a tx to the txlist
addTx (txData, onTxDoneCb) { addTx (txMeta, onTxDoneCb = noop) {
var txList = this.getTxList() var txList = this.getTxList()
var txLimit = this.txLimit var txHistoryLimit = this.txHistoryLimit
if (txList.length > txLimit - 1) { if (txList.length > txHistoryLimit - 1) {
txList.shift() var index = txList.findIndex((metaTx) => metaTx.status === 'confirmed' || metaTx.status === 'rejected')
index ? txList.splice(index, index) : txList.shift()
} }
txList.push(txData) txList.push(txMeta)
this._saveTxList(txList) this._saveTxList(txList)
this.addOnTxDoneCb(txData.id, onTxDoneCb) // keep the onTxDoneCb around in a listener
this.emit('unapproved', txData) // for after approval/denial (requires user interaction)
// This onTxDoneCb fires completion to the Dapp's write operation.
this.once(`${txMeta.id}:signed`, function (txId) {
this.removeAllListeners(`${txMeta.id}:rejected`)
onTxDoneCb(null, true)
})
this.once(`${txMeta.id}:rejected`, function (txId) {
this.removeAllListeners(`${txMeta.id}:signed`)
onTxDoneCb(null, false)
})
this.emit('update') this.emit('update')
this.emit(`${txMeta.id}:unapproved`, txMeta)
} }
// gets tx by Id and returns it // gets tx by Id and returns it
getTx (txId, cb) { getTx (txId, cb) {
var txList = this.getTxList() var txList = this.getTxList()
var tx = txList.find((tx) => tx.id === txId) var txMeta = txList.find((txData) => txData.id === txId)
return cb ? cb(tx) : tx return cb ? cb(txMeta) : txMeta
} }
// //
updateTx (txData) { updateTx (txMeta) {
var txId = txData.id var txId = txMeta.id
var txList = this.getTxList() var txList = this.getTxList()
var index = txList.findIndex((txData) => txData.id === txId)
var updatedTxList = txList.map((tx) => { txList[index] = txMeta
if (tx.id === txId) { this._saveTxList(txList)
tx = txData
}
return tx
})
this._saveTxList(updatedTxList)
} }
get unConftxCount () { get unconfTxCount () {
return Object.keys(this.getUnapprovedTxList()).length return Object.keys(this.getUnapprovedTxList()).length
} }
@ -67,16 +83,66 @@ module.exports = class TransactionManager extends EventEmitter {
return this.getTxsByMetaData('status', 'signed').length return this.getTxsByMetaData('status', 'signed').length
} }
addUnapprovedTransaction (txParams, onTxDoneCb, cb) {
// create txData obj with parameters and meta data
var time = (new Date()).getTime()
var txId = createId()
txParams.metamaskId = txId
txParams.metamaskNetworkId = this.getNetwork()
var txData = {
id: txId,
txParams: txParams,
time: time,
status: 'unapproved',
gasMultiplier: this.getGasMultiplier() || 1,
metamaskNetworkId: this.getNetwork(),
}
this.txProviderUtils.analyzeGasUsage(txData, this.txDidComplete.bind(this, txData, onTxDoneCb, cb))
// calculate metadata for tx
}
txDidComplete (txMeta, onTxDoneCb, cb, err) {
if (err) return cb(err)
this.addTx(txMeta, onTxDoneCb)
cb(null, txMeta)
}
getUnapprovedTxList () { getUnapprovedTxList () {
var txList = this.getTxList() var txList = this.getTxList()
return txList.filter((tx) => { return txList.filter((txMeta) => txMeta.status === 'unapproved')
return tx.status === 'unapproved' .reduce((result, tx) => {
}).reduce((result, tx) => {
result[tx.id] = tx result[tx.id] = tx
return result return result
}, {}) }, {})
} }
approveTransaction (txId, cb) {
this.setTxStatusSigned(txId)
cb()
}
cancelTransaction (txId, cb) {
this.setTxStatusRejected(txId)
if (cb && typeof cb === 'function') {
cb()
}
}
resolveSignedTransaction (txPromise) {
const self = this
txPromise.then(({tx, txParams, cb}) => {
// Add the tx hash to the persisted meta-tx object
var txHash = ethUtil.bufferToHex(tx.hash())
var metaTx = self.getTx(txParams.metamaskId)
metaTx.hash = txHash
// return raw serialized tx
var rawTx = ethUtil.bufferToHex(tx.serialize())
cb(null, rawTx)
})
}
/* /*
Takes an object of fields to search for eg: Takes an object of fields to search for eg:
var thingsToLookFor = { var thingsToLookFor = {
@ -92,7 +158,7 @@ module.exports = class TransactionManager extends EventEmitter {
or for filltering for all txs from one account or for filltering for all txs from one account
and that have been 'confirmed' and that have been 'confirmed'
*/ */
getFilterdTxList (opts) { getFilteredTxList (opts) {
var filteredTxList var filteredTxList
Object.keys(opts).forEach((key) => { Object.keys(opts).forEach((key) => {
filteredTxList = this.getTxsByMetaData(key, opts[key], filteredTxList) filteredTxList = this.getTxsByMetaData(key, opts[key], filteredTxList)
@ -101,107 +167,96 @@ module.exports = class TransactionManager extends EventEmitter {
} }
getTxsByMetaData (key, value, txList = this.getTxList()) { getTxsByMetaData (key, value, txList = this.getTxList()) {
return txList.filter((tx) => { return txList.filter((txMeta) => {
if (key in tx.txParams) { if (key in txMeta.txParams) {
return tx.txParams[key] === value return txMeta.txParams[key] === value
} else { } else {
return tx[key] === value return txMeta[key] === value
} }
}) })
} }
// keeps around the txCbs for later
addOnTxDoneCb (txId, cb) {
this._unconfTxCbs[txId] = cb || noop
}
execOnTxDoneCb (txId, conf) {
var approvalCb = this._unconfTxCbs[txId]
approvalCb(null, conf)
// clean up
delete this._unconfTxCbs[txId]
}
// should return the tx
// Should find the tx in the tx list and
// update it.
// should set the status in txData
// // - `'unapproved'` the user has not responded
// // - `'rejected'` the user has responded no!
// // - `'signed'` the tx is signed
// // - `'submitted'` the tx is sent to a server
// // - `'confirmed'` the tx has been included in a block.
setTxStatus (txId, status) {
var txData = this.getTx(txId)
txData.status = status
this.emit(status, txId)
this.updateTx(txData, status)
}
// should return the status of the tx. // should return the status of the tx.
getTxStatus (txId, cb) { getTxStatus (txId, cb) {
const txData = this.getTx(txId) const txMeta = this.getTx(txId)
return cb ? cb(txData.staus) : txData.status return cb ? cb(txMeta.staus) : txMeta.status
} }
// should update the status of the tx to 'signed'. // should update the status of the tx to 'signed'.
setTxStatusSigned (txId) { setTxStatusSigned (txId) {
this.setTxStatus(txId, 'signed') this._setTxStatus(txId, 'signed')
this.emit('update') this.emit('update')
} }
// should update the status of the tx to 'rejected'. // should update the status of the tx to 'rejected'.
setTxStatusRejected (txId) { setTxStatusRejected (txId) {
this.setTxStatus(txId, 'rejected') this._setTxStatus(txId, 'rejected')
this.emit('update') this.emit('update')
} }
setTxStatusConfirmed (txId) { setTxStatusConfirmed (txId) {
this.setTxStatus(txId, 'confirmed') this._setTxStatus(txId, 'confirmed')
} }
// merges txParams obj onto txData.txParams // merges txParams obj onto txData.txParams
// use extend to ensure that all fields are filled // use extend to ensure that all fields are filled
updateTxParams (txId, txParams) { updateTxParams (txId, txParams) {
var txData = this.getTx(txId) var txMeta = this.getTx(txId)
txData.txParams = extend(txData, txParams) txMeta.txParams = extend(txMeta, txParams)
this.updateTx(txData) this.updateTx(txMeta)
}
// sets provider for provider utils and event listener
setProvider (provider) {
this.provider = provider
this.txProviderUtils = new TxProviderUtil(provider)
this.provider.on('block', this.checkForTxInBlock.bind(this))
} }
// checks if a signed tx is in a block and // checks if a signed tx is in a block and
// if included sets the tx status as 'confirmed' // if included sets the tx status as 'confirmed'
checkForTxInBlock () { checkForTxInBlock () {
var signedTxList = this.getFilterdTxList({status: 'signed'}) var signedTxList = this.getFilteredTxList({status: 'signed', err: undefined})
if (!signedTxList.length) return if (!signedTxList.length) return
var self = this
signedTxList.forEach((tx) => { signedTxList.forEach((tx) => {
var txHash = tx.hash var txHash = tx.hash
var txId = tx.id var txId = tx.id
if (!txHash) return if (!txHash) return
// var d this.txProviderUtils.query.getTransactionByHash(txHash, (err, txMeta) => {
this.txProviderUtils.query.getTransactionByHash(txHash, (err, txData) => { if (err || !txMeta) {
if (err) { tx.err = err || 'Tx could possibly have not submitted'
tx this.updateTx(tx)
return txMeta ? console.error(err) : console.debug(`txMeta is ${txMeta} for:`, tx)
return console.error(err)
} }
if (txData.blockNumber !== null) { if (txMeta.blockNumber) {
self.setTxStatusConfirmed(txId) this.setTxStatusConfirmed(txId)
} }
}) })
}) })
} }
// Private functions
// Saves the new/updated txList.
// Function is intended only for internal use
_saveTxList (txList) {
this.txList = txList
this._setTxList(txList)
}
// should return the tx
// Should find the tx in the tx list and
// update it.
// should set the status in txData
// - `'unapproved'` the user has not responded
// - `'rejected'` the user has responded no!
// - `'signed'` the tx is signed
// - `'submitted'` the tx is sent to a server
// - `'confirmed'` the tx has been included in a block.
_setTxStatus (txId, status) {
var txMeta = this.getTx(txId)
txMeta.status = status
this.emit(`${txMeta.id}:${status}`, txId)
this.updateTx(txMeta)
}
} }
function noop () {}
const noop = () => console.warn('noop was used no cb provided')

8
library/controller.js
View File

@ -21,7 +21,7 @@ function initializeZeroClient() {
// User confirmation callbacks: // User confirmation callbacks:
showUnconfirmedMessage, showUnconfirmedMessage,
unlockAccountMessage, unlockAccountMessage,
showUnconfirmedTx, showUnapprovedTx,
// Persistence Methods: // Persistence Methods:
setData, setData,
loadData, loadData,
@ -36,8 +36,8 @@ function initializeZeroClient() {
console.log('notif stub - showUnconfirmedMessage') console.log('notif stub - showUnconfirmedMessage')
} }
function showUnconfirmedTx (txParams, txData, onTxDoneCb) { function showUnapprovedTx (txParams, txData, onTxDoneCb) {
console.log('notif stub - showUnconfirmedTx') console.log('notif stub - showUnapprovedTx')
} }
// //
@ -156,4 +156,4 @@ function initializeZeroClient() {
} }
} }
} }

2
mock-dev.js
View File

@ -46,7 +46,7 @@ const controller = new MetamaskController({
// User confirmation callbacks: // User confirmation callbacks:
showUnconfirmedMessage: noop, showUnconfirmedMessage: noop,
unlockAccountMessage: noop, unlockAccountMessage: noop,
showUnconfirmedTx: noop, showUnapprovedTx: noop,
// Persistence Methods: // Persistence Methods:
setData, setData,
loadData, loadData,

50
test/unit/idStore-test.js
View File

@ -139,54 +139,4 @@ describe('IdentityStore', function() {
}) })
}) })
}) })
describe('#addGasBuffer', function() {
it('formats the result correctly', function() {
const idStore = new IdentityStore({
configManager: configManagerGen(),
ethStore: {
addAccount(acct) { accounts.push(ethUtil.addHexPrefix(acct)) },
},
})
const gas = '0x01'
const bnGas = new BN(gas, 16)
const bnResult = idStore.addGasBuffer(bnGas)
assert.ok(bnResult.gt(gas), 'added more gas as buffer.')
})
it('buffers 20%', function() {
const idStore = new IdentityStore({
configManager: configManagerGen(),
ethStore: {
addAccount(acct) { accounts.push(ethUtil.addHexPrefix(acct)) },
},
})
const gas = '0x04ee59' // Actual estimated gas example
const bnGas = new BN(ethUtil.stripHexPrefix(gas), 16)
const five = new BN('5', 10)
const correctBuffer = bnGas.div(five)
const correct = bnGas.add(correctBuffer)
const bnResult = idStore.addGasBuffer(bnGas)
assert(bnResult.gt(bnGas), 'Estimate increased in value.')
assert.equal(bnResult.sub(bnGas).toString(10), correctBuffer.toString(10), 'added 20% gas')
})
})
describe('#checkForDelegateCall', function() {
const idStore = new IdentityStore({
configManager: configManagerGen(),
ethStore: {
addAccount(acct) { accounts.push(ethUtil.addHexPrefix(acct)) },
},
})
var result = idStore.checkForDelegateCall(delegateCallCode)
assert.equal(result, true, 'no delegate call in provided code')
})
}) })

2
test/unit/metamask-controller-test.js
View File

@ -9,7 +9,7 @@ describe('MetaMaskController', function() {
let controller = new MetaMaskController({ let controller = new MetaMaskController({
showUnconfirmedMessage: noop, showUnconfirmedMessage: noop,
unlockAccountMessage: noop, unlockAccountMessage: noop,
showUnconfirmedTx: noop, showUnapprovedTx: noop,
setData, setData,
loadData, loadData,
}) })

73
test/unit/tx-manager-test.js
View File

@ -1,5 +1,6 @@
const assert = require('assert') const assert = require('assert')
const extend = require('xtend') const extend = require('xtend')
const EventEmitter = require('events')
const STORAGE_KEY = 'metamask-persistance-key' const STORAGE_KEY = 'metamask-persistance-key'
const TransactionManager = require('../../app/scripts/transaction-manager') const TransactionManager = require('../../app/scripts/transaction-manager')
@ -9,10 +10,11 @@ describe('Transaction Manager', function() {
const onTxDoneCb = () => true const onTxDoneCb = () => true
beforeEach(function() { beforeEach(function() {
txManager = new TransactionManager ({ txManager = new TransactionManager ({
TxListFromStore: [], txList: [],
setTxList: () => {}, setTxList: () => {},
provider: "testnet", provider: "testnet",
txLimit: 40, txHistoryLimit: 10,
blockTracker: new EventEmitter(),
}) })
}) })
@ -38,7 +40,7 @@ describe('Transaction Manager', function() {
describe('#addTx', function() { describe('#addTx', function() {
it('adds a tx returned in getTxList', function() { it('adds a tx returned in getTxList', function() {
var tx = { id: 1 } var tx = { id: 1, status: 'confirmed',}
txManager.addTx(tx, onTxDoneCb) txManager.addTx(tx, onTxDoneCb)
var result = txManager.getTxList() var result = txManager.getTxList()
assert.ok(Array.isArray(result)) assert.ok(Array.isArray(result))
@ -47,15 +49,41 @@ describe('Transaction Manager', function() {
}) })
it('cuts off early txs beyond a limit', function() { it('cuts off early txs beyond a limit', function() {
const limit = txManager.txLimit const limit = txManager.txHistoryLimit
for (let i = 0; i < limit + 1; i++) { for (let i = 0; i < limit + 1; i++) {
let tx = { id: i, time: new Date()} let tx = { id: i, time: new Date(), status: 'confirmed'}
txManager.addTx(tx, onTxDoneCb) txManager.addTx(tx, onTxDoneCb)
} }
var result = txManager.getTxList() var result = txManager.getTxList()
assert.equal(result.length, limit, `limit of ${limit} txs enforced`) assert.equal(result.length, limit, `limit of ${limit} txs enforced`)
assert.equal(result[0].id, 1, 'early txs truncted') assert.equal(result[0].id, 1, 'early txs truncted')
}) })
it('cuts off early txs beyond a limit weather or not it is confirmed or rejected', function() {
const limit = txManager.txHistoryLimit
for (let i = 0; i < limit + 1; i++) {
let tx = { id: i, time: new Date(), status: 'rejected'}
txManager.addTx(tx, onTxDoneCb)
}
var result = txManager.getTxList()
assert.equal(result.length, limit, `limit of ${limit} txs enforced`)
assert.equal(result[0].id, 1, 'early txs truncted')
})
it('cuts off early txs beyond a limit but does not cut unapproved txs', function() {
var unconfirmedTx = { id: 0, time: new Date(), status: 'unapproved'}
txManager.addTx(unconfirmedTx, onTxDoneCb)
const limit = txManager.txHistoryLimit
for (let i = 1; i < limit + 1; i++) {
let tx = { id: i, time: new Date(), status: 'confirmed'}
txManager.addTx(tx, onTxDoneCb)
}
var result = txManager.getTxList()
assert.equal(result.length, limit, `limit of ${limit} txs enforced`)
assert.equal(result[0].id, 0, 'first tx should still be their')
assert.equal(result[0].status, 'unapproved', 'first tx should be unapproved')
assert.equal(result[1].id, 2, 'early txs truncted')
})
}) })
describe('#setTxStatusSigned', function() { describe('#setTxStatusSigned', function() {
@ -72,13 +100,10 @@ describe('Transaction Manager', function() {
it('should emit a signed event to signal the exciton of callback', (done) => { it('should emit a signed event to signal the exciton of callback', (done) => {
this.timeout(10000) this.timeout(10000)
var tx = { id: 1, status: 'unapproved' } var tx = { id: 1, status: 'unapproved' }
txManager.on('signed', function (txId) { let onTxDoneCb = function (err, txId) {
var approvalCb = this._unconfTxCbs[txId] assert(true, 'event listener has been triggered and onTxDoneCb executed')
assert(approvalCb(), 'txCb was retrieved')
assert.equal(txId, 1)
assert(true, 'event listener has been triggered')
done() done()
}) }
txManager.addTx(tx, onTxDoneCb) txManager.addTx(tx, onTxDoneCb)
txManager.setTxStatusSigned(1) txManager.setTxStatusSigned(1)
}) })
@ -87,7 +112,7 @@ describe('Transaction Manager', function() {
describe('#setTxStatusRejected', function() { describe('#setTxStatusRejected', function() {
it('sets the tx status to rejected', function() { it('sets the tx status to rejected', function() {
var tx = { id: 1, status: 'unapproved' } var tx = { id: 1, status: 'unapproved' }
txManager.addTx(tx) txManager.addTx(tx, onTxDoneCb)
txManager.setTxStatusRejected(1) txManager.setTxStatusRejected(1)
var result = txManager.getTxList() var result = txManager.getTxList()
assert.ok(Array.isArray(result)) assert.ok(Array.isArray(result))
@ -98,13 +123,10 @@ describe('Transaction Manager', function() {
it('should emit a rejected event to signal the exciton of callback', (done) => { it('should emit a rejected event to signal the exciton of callback', (done) => {
this.timeout(10000) this.timeout(10000)
var tx = { id: 1, status: 'unapproved' } var tx = { id: 1, status: 'unapproved' }
txManager.on('rejected', function (txId) { let onTxDoneCb = function (err, txId) {
var approvalCb = this._unconfTxCbs[txId] assert(true, 'event listener has been triggered and onTxDoneCb executed')
assert(approvalCb(), 'txCb was retrieved')
assert.equal(txId, 1)
assert(true, 'event listener has been triggered')
done() done()
}) }
txManager.addTx(tx, onTxDoneCb) txManager.addTx(tx, onTxDoneCb)
txManager.setTxStatusRejected(1) txManager.setTxStatusRejected(1)
}) })
@ -128,7 +150,6 @@ describe('Transaction Manager', function() {
let result = txManager.getUnapprovedTxList() let result = txManager.getUnapprovedTxList()
assert.equal(typeof result, 'object') assert.equal(typeof result, 'object')
assert.equal(result['1'].status, 'unapproved') assert.equal(result['1'].status, 'unapproved')
assert.equal(result['0'], undefined)
assert.equal(result['2'], undefined) assert.equal(result['2'], undefined)
}) })
}) })
@ -142,7 +163,7 @@ describe('Transaction Manager', function() {
}) })
}) })
describe('#getFilterdTxList', function() { describe('#getFilteredTxList', function() {
it('returns a tx with the requested data', function() { it('returns a tx with the requested data', function() {
var foop = 0 var foop = 0
var zoop = 0 var zoop = 0
@ -157,12 +178,12 @@ describe('Transaction Manager', function() {
}, onTxDoneCb) }, onTxDoneCb)
evryOther ? ++foop : ++zoop evryOther ? ++foop : ++zoop
} }
assert.equal(txManager.getFilterdTxList({status: 'confirmed', from: 'zoop'}).length, zoop) assert.equal(txManager.getFilteredTxList({status: 'confirmed', from: 'zoop'}).length, zoop)
assert.equal(txManager.getFilterdTxList({status: 'confirmed', to: 'foop'}).length, zoop) assert.equal(txManager.getFilteredTxList({status: 'confirmed', to: 'foop'}).length, zoop)
assert.equal(txManager.getFilterdTxList({status: 'confirmed', from: 'foop'}).length, 0) assert.equal(txManager.getFilteredTxList({status: 'confirmed', from: 'foop'}).length, 0)
assert.equal(txManager.getFilterdTxList({status: 'confirmed'}).length, zoop) assert.equal(txManager.getFilteredTxList({status: 'confirmed'}).length, zoop)
assert.equal(txManager.getFilterdTxList({from: 'foop'}).length, foop) assert.equal(txManager.getFilteredTxList({from: 'foop'}).length, foop)
assert.equal(txManager.getFilterdTxList({from: 'zoop'}).length, zoop) assert.equal(txManager.getFilteredTxList({from: 'zoop'}).length, zoop)
}) })
}) })

4
ui/app/components/transaction-list-item.js
View File

@ -31,7 +31,7 @@ TransactionListItem.prototype.render = function () {
var isMsg = ('msgParams' in transaction) var isMsg = ('msgParams' in transaction)
var isTx = ('txParams' in transaction) var isTx = ('txParams' in transaction)
var isPending = transaction.status === 'unconfirmed' var isPending = transaction.status === 'unapproved'
let txParams let txParams
if (isTx) { if (isTx) {
@ -59,7 +59,7 @@ TransactionListItem.prototype.render = function () {
}, [ }, [
h('.identicon-wrapper.flex-column.flex-center.select-none', [ h('.identicon-wrapper.flex-column.flex-center.select-none', [
transaction.status === 'unconfirmed' ? h('i.fa.fa-ellipsis-h', { transaction.status === 'unapproved' ? h('i.fa.fa-ellipsis-h', {
style: { style: {
fontSize: '27px', fontSize: '27px',
}, },