aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/actions.js105
-rw-r--r--ui/app/app.js14
-rw-r--r--ui/app/components/button/button.component.js5
-rw-r--r--ui/app/components/card/card.component.js25
-rw-r--r--ui/app/components/card/index.js1
-rw-r--r--ui/app/components/card/index.scss11
-rw-r--r--ui/app/components/card/tests/card.component.test.js25
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js9
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js1
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container-content/index.js1
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container-content/index.scss2
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container.component.js13
-rw-r--r--ui/app/components/currency-display/currency-display.component.js7
-rw-r--r--ui/app/components/currency-display/currency-display.container.js8
-rw-r--r--ui/app/components/currency-display/tests/currency-display.container.test.js44
-rw-r--r--ui/app/components/customize-gas-modal/index.js15
-rw-r--r--ui/app/components/dropdowns/account-details-dropdown.js109
-rw-r--r--ui/app/components/dropdowns/network-dropdown.js10
-rw-r--r--ui/app/components/dropdowns/tests/dropdown.test.js37
-rw-r--r--ui/app/components/dropdowns/tests/menu.test.js87
-rw-r--r--ui/app/components/dropdowns/tests/network-dropdown-icon.test.js25
-rw-r--r--ui/app/components/dropdowns/tests/network-dropdown.test.js97
-rw-r--r--ui/app/components/dropdowns/token-menu-dropdown.js9
-rw-r--r--ui/app/components/error-message/error-message.component.js (renamed from ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js)14
-rw-r--r--ui/app/components/error-message/index.js1
-rw-r--r--ui/app/components/error-message/index.scss (renamed from ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss)2
-rw-r--r--ui/app/components/error-message/tests/error-message.component.test.js36
-rw-r--r--ui/app/components/hex-as-decimal-input.js161
-rw-r--r--ui/app/components/hex-to-decimal/hex-to-decimal.component.js21
-rw-r--r--ui/app/components/hex-to-decimal/index.js1
-rw-r--r--ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js26
-rw-r--r--ui/app/components/identicon.js1
-rw-r--r--ui/app/components/index.scss12
-rw-r--r--ui/app/components/input-number.js13
-rw-r--r--ui/app/components/menu-bar/menu-bar.component.js19
-rw-r--r--ui/app/components/modal/index.js2
-rw-r--r--ui/app/components/modal/index.scss62
-rw-r--r--ui/app/components/modal/modal-content/index.js1
-rw-r--r--ui/app/components/modal/modal-content/index.scss19
-rw-r--r--ui/app/components/modal/modal-content/modal-content.component.js32
-rw-r--r--ui/app/components/modal/modal-content/tests/modal-content.component.test.js44
-rw-r--r--ui/app/components/modal/modal.component.js80
-rw-r--r--ui/app/components/modal/tests/modal.component.test.js103
-rw-r--r--ui/app/components/modals/account-details-modal.js11
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js29
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js1
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss17
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js27
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.component.js68
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.container.js62
-rw-r--r--ui/app/components/modals/cancel-transaction/index.js1
-rw-r--r--ui/app/components/modals/cancel-transaction/index.scss18
-rw-r--r--ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js56
-rw-r--r--ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js78
-rw-r--r--ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js12
-rw-r--r--ui/app/components/modals/confirm-remove-account/index.js3
-rw-r--r--ui/app/components/modals/confirm-remove-account/index.scss58
-rw-r--r--ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js48
-rw-r--r--ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js11
-rw-r--r--ui/app/components/modals/confirm-reset-account/index.js3
-rw-r--r--ui/app/components/modals/customize-gas/customize-gas.component.js15
-rw-r--r--ui/app/components/modals/deposit-ether-modal.js7
-rw-r--r--ui/app/components/modals/export-private-key-modal.js36
-rw-r--r--ui/app/components/modals/index.scss109
-rw-r--r--ui/app/components/modals/modal.js68
-rw-r--r--ui/app/components/modals/notification/index.js2
-rw-r--r--ui/app/components/modals/notification/notification.component.js30
-rw-r--r--ui/app/components/modals/notification/notification.container.js38
-rw-r--r--ui/app/components/modals/reject-transactions/index.js1
-rw-r--r--ui/app/components/modals/reject-transactions/index.scss6
-rw-r--r--ui/app/components/modals/reject-transactions/reject-transactions.component.js45
-rw-r--r--ui/app/components/modals/reject-transactions/reject-transactions.container.js17
-rw-r--r--ui/app/components/modals/transaction-confirmed/index.js3
-rw-r--r--ui/app/components/modals/transaction-confirmed/index.scss22
-rw-r--r--ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js59
-rw-r--r--ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js4
-rw-r--r--ui/app/components/modals/transaction-details/index.js1
-rw-r--r--ui/app/components/modals/transaction-details/transaction-details.component.js54
-rw-r--r--ui/app/components/modals/transaction-details/transaction-details.container.js4
-rw-r--r--ui/app/components/modals/welcome-beta/index.js3
-rw-r--r--ui/app/components/modals/welcome-beta/welcome-beta.component.js23
-rw-r--r--ui/app/components/modals/welcome-beta/welcome-beta.container.js4
-rw-r--r--ui/app/components/page-container/index.scss29
-rw-r--r--ui/app/components/page-container/page-container-footer/page-container-footer.component.js46
-rw-r--r--ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js79
-rw-r--r--ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js82
-rw-r--r--ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js2
-rw-r--r--ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js54
-rw-r--r--ui/app/components/pages/confirm-add-token/confirm-add-token.component.js46
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js30
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js26
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/account-list.js31
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/connect-screen.js15
-rw-r--r--ui/app/components/pages/create-account/import-account/index.js2
-rw-r--r--ui/app/components/pages/create-account/import-account/json.js21
-rw-r--r--ui/app/components/pages/create-account/import-account/private-key.js19
-rw-r--r--ui/app/components/pages/create-account/new-account.js19
-rw-r--r--ui/app/components/pages/index.scss2
-rw-r--r--ui/app/components/pages/keychains/reveal-seed.js29
-rw-r--r--ui/app/components/pages/settings/index.js65
-rw-r--r--ui/app/components/pages/settings/index.scss80
-rw-r--r--ui/app/components/pages/settings/info-tab/index.js1
-rw-r--r--ui/app/components/pages/settings/info-tab/index.scss56
-rw-r--r--ui/app/components/pages/settings/info-tab/info-tab.component.js136
-rw-r--r--ui/app/components/pages/settings/info.js120
-rw-r--r--ui/app/components/pages/settings/settings-tab/index.js1
-rw-r--r--ui/app/components/pages/settings/settings-tab/index.scss51
-rw-r--r--ui/app/components/pages/settings/settings-tab/settings-tab.component.js360
-rw-r--r--ui/app/components/pages/settings/settings-tab/settings-tab.container.js59
-rw-r--r--ui/app/components/pages/settings/settings.component.js54
-rw-r--r--ui/app/components/pages/settings/settings.js394
-rw-r--r--ui/app/components/pages/unlock-page/index.scss1
-rw-r--r--ui/app/components/qr-code.js2
-rw-r--r--ui/app/components/selected-account/selected-account.component.js9
-rw-r--r--ui/app/components/selected-account/tests/selected-account-component.test.js16
-rw-r--r--ui/app/components/send/currency-display/tests/currency-display.test.js91
-rw-r--r--ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js34
-rw-r--r--ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js9
-rw-r--r--ui/app/components/send/send-content/send-content.component.js12
-rw-r--r--ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js8
-rw-r--r--ui/app/components/send/send-content/send-to-row/send-to-row.component.js5
-rw-r--r--ui/app/components/send/send-content/send-to-row/send-to-row.container.js2
-rw-r--r--ui/app/components/send/send-content/send-to-row/send-to-row.utils.js6
-rw-r--r--ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js2
-rw-r--r--ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js6
-rw-r--r--ui/app/components/send/send-footer/send-footer.component.js4
-rw-r--r--ui/app/components/send/send.component.js3
-rw-r--r--ui/app/components/send/send.container.js3
-rw-r--r--ui/app/components/send/send.utils.js32
-rw-r--r--ui/app/components/send/tests/send-component.test.js1
-rw-r--r--ui/app/components/send/tests/send-container.test.js5
-rw-r--r--ui/app/components/send/tests/send-utils.test.js25
-rw-r--r--ui/app/components/send/to-autocomplete/to-autocomplete.js3
-rw-r--r--ui/app/components/sender-to-recipient/index.scss3
-rw-r--r--ui/app/components/sender-to-recipient/sender-to-recipient.component.js19
-rw-r--r--ui/app/components/shapeshift-form.js8
-rw-r--r--ui/app/components/signature-request.js42
-rw-r--r--ui/app/components/token-currency-display/token-currency-display.component.js6
-rw-r--r--ui/app/components/tooltip-v2.js87
-rw-r--r--ui/app/components/transaction-action/tests/transaction-action.component.test.js88
-rw-r--r--ui/app/components/transaction-action/transaction-action.component.js12
-rw-r--r--ui/app/components/transaction-activity-log/index.js1
-rw-r--r--ui/app/components/transaction-activity-log/index.scss70
-rw-r--r--ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js35
-rw-r--r--ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js27
-rw-r--r--ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js208
-rw-r--r--ui/app/components/transaction-activity-log/transaction-activity-log.component.js91
-rw-r--r--ui/app/components/transaction-activity-log/transaction-activity-log.container.js11
-rw-r--r--ui/app/components/transaction-activity-log/transaction-activity-log.util.js86
-rw-r--r--ui/app/components/transaction-breakdown/index.js1
-rw-r--r--ui/app/components/transaction-breakdown/index.scss23
-rw-r--r--ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js37
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js1
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss19
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js39
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js26
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown.component.js98
-rw-r--r--ui/app/components/transaction-list-item-details/index.js1
-rw-r--r--ui/app/components/transaction-list-item-details/index.scss49
-rw-r--r--ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js66
-rw-r--r--ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js111
-rw-r--r--ui/app/components/transaction-list-item/index.scss48
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js128
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.container.js20
-rw-r--r--ui/app/components/transaction-list/index.scss7
-rw-r--r--ui/app/components/transaction-list/transaction-list.component.js5
-rw-r--r--ui/app/components/transaction-status/index.scss7
-rw-r--r--ui/app/components/transaction-status/transaction-status.component.js12
-rw-r--r--ui/app/components/wallet-view.js8
-rw-r--r--ui/app/conf-tx.js2
-rw-r--r--ui/app/constants/common.js2
-rw-r--r--ui/app/constants/transactions.js1
-rw-r--r--ui/app/conversion-util.js3
-rw-r--r--ui/app/css/itcss/components/account-details-dropdown.scss7
-rw-r--r--ui/app/css/itcss/components/buttons.scss15
-rw-r--r--ui/app/css/itcss/components/index.scss4
-rw-r--r--ui/app/css/itcss/components/loading-overlay.scss20
-rw-r--r--ui/app/css/itcss/components/network.scss9
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss10
-rw-r--r--ui/app/css/itcss/components/request-signature.scss19
-rw-r--r--ui/app/css/itcss/components/send.scss25
-rw-r--r--ui/app/css/itcss/components/settings.scss214
-rw-r--r--ui/app/helpers/common.util.js5
-rw-r--r--ui/app/helpers/confirm-transaction/util.js2
-rw-r--r--ui/app/helpers/conversions.util.js48
-rw-r--r--ui/app/helpers/tests/common.util.test.js27
-rw-r--r--ui/app/helpers/tests/transactions.util.test.js57
-rw-r--r--ui/app/helpers/transactions.util.js49
-rw-r--r--ui/app/higher-order-components/with-modal-props/index.js1
-rw-r--r--ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js43
-rw-r--r--ui/app/higher-order-components/with-modal-props/with-modal-props.js21
-rw-r--r--ui/app/selectors/confirm-transaction.js7
-rw-r--r--ui/app/selectors/transactions.js2
-rw-r--r--ui/app/token-util.js5
-rw-r--r--ui/i18n-helper.js8
195 files changed, 4933 insertions, 1725 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6d5b1ef3f..eea581d33 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -167,6 +167,7 @@ var actions = {
updateTransaction,
updateAndApproveTx,
cancelTx: cancelTx,
+ cancelTxs,
completedTx: completedTx,
txError: txError,
nextTx: nextTx,
@@ -237,6 +238,7 @@ var actions = {
removeSuggestedTokens,
UPDATE_TOKENS: 'UPDATE_TOKENS',
setRpcTarget: setRpcTarget,
+ delRpcTarget: delRpcTarget,
setProviderType: setProviderType,
SET_HARDWARE_WALLET_DEFAULT_HD_PATH: 'SET_HARDWARE_WALLET_DEFAULT_HD_PATH',
setHardwareWalletDefaultHdPath,
@@ -315,6 +317,8 @@ var actions = {
CLEAR_PENDING_TOKENS: 'CLEAR_PENDING_TOKENS',
setPendingTokens,
clearPendingTokens,
+
+ createCancelTransaction,
}
module.exports = actions
@@ -413,12 +417,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()))
@@ -908,6 +918,7 @@ function updateGasData ({
selectedToken,
to,
value,
+ data,
}) {
return (dispatch) => {
dispatch(actions.gasLoadingStarted())
@@ -928,6 +939,7 @@ function updateGasData ({
to,
value,
estimateGasPrice,
+ data,
}),
])
})
@@ -1291,6 +1303,47 @@ function cancelTx (txData) {
}
}
+/**
+ * Cancels all of the given transactions
+ * @param {Array<object>} txDataList a list of tx data objects
+ * @return {function(*): Promise<void>}
+ */
+function cancelTxs (txDataList) {
+ return async (dispatch, getState) => {
+ dispatch(actions.showLoadingIndication())
+ const txIds = txDataList.map(({id}) => id)
+ const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
+ background.cancelTransaction(id, (err) => {
+ if (err) {
+ return reject(err)
+ }
+
+ resolve()
+ })
+ }))
+
+ await Promise.all(cancellations)
+ const newState = await updateMetamaskStateFromBackground()
+ dispatch(actions.updateMetamaskState(newState))
+ dispatch(actions.clearSend())
+
+ txIds.forEach((id) => {
+ dispatch(actions.completedTx(id))
+ })
+
+ dispatch(actions.hideLoadingIndication())
+
+ if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+ return global.platform.closeCurrentWindow()
+ }
+ }
+}
+
+/**
+ * @deprecated
+ * @param {Array<object>} txsData
+ * @return {Function}
+ */
function cancelAllTx (txsData) {
return (dispatch) => {
txsData.forEach((txData, i) => {
@@ -1709,7 +1762,7 @@ function markNoticeRead (notice) {
background.markNoticeRead(notice, (err, notice) => {
dispatch(actions.hideLoadingIndication())
if (err) {
- dispatch(actions.displayWarning(err))
+ dispatch(actions.displayWarning(err.message))
return reject(err)
}
@@ -1766,6 +1819,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
//
@@ -1776,7 +1852,7 @@ function setProviderType (type) {
background.setProviderType(type, (err, result) => {
if (err) {
log.error(err)
- return dispatch(self.displayWarning('Had a problem changing networks!'))
+ return dispatch(actions.displayWarning('Had a problem changing networks!'))
}
dispatch(actions.updateProviderType(type))
dispatch(actions.setSelectedToken())
@@ -1798,7 +1874,20 @@ function setRpcTarget (newRpc) {
background.setCustomRpc(newRpc, (err, result) => {
if (err) {
log.error(err)
- return dispatch(self.displayWarning('Had a problem changing networks!'))
+ return dispatch(actions.displayWarning('Had a problem changing networks!'))
+ }
+ dispatch(actions.setSelectedToken())
+ })
+ }
+}
+
+function delRpcTarget (oldRpc) {
+ return (dispatch) => {
+ log.debug(`background.delRpcTarget: ${oldRpc}`)
+ background.delCustomRpc(oldRpc, (err, result) => {
+ if (err) {
+ log.error(err)
+ return dispatch(self.displayWarning('Had a problem removing network!'))
}
dispatch(actions.setSelectedToken())
})
@@ -2220,6 +2309,10 @@ function updateNetworkNonce (address) {
return (dispatch) => {
return new Promise((resolve, reject) => {
global.ethQuery.getTransactionCount(address, (err, data) => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ return reject(err)
+ }
dispatch(setNetworkNonce(data))
resolve(data)
})
@@ -2307,7 +2400,7 @@ function setUseBlockie (val) {
function updateCurrentLocale (key) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
- fetchLocale(key)
+ return fetchLocale(key)
.then((localeMessages) => {
log.debug(`background.setCurrentLocale`)
background.setCurrentLocale(key, (err) => {
diff --git a/ui/app/app.js b/ui/app/app.js
index c93f93e75..aeb3d05ee 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -19,9 +19,9 @@ const Sidebar = require('./components/sidebars').default
// other views
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')
@@ -152,12 +152,14 @@ 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(),
+ ]),
])
)
}
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 (
<button
className={classnames(
+ 'button',
typeHash[type],
large && CLASSNAME_LARGE,
className
diff --git a/ui/app/components/card/card.component.js b/ui/app/components/card/card.component.js
new file mode 100644
index 000000000..bb7241da1
--- /dev/null
+++ b/ui/app/components/card/card.component.js
@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class Card extends PureComponent {
+ static propTypes = {
+ className: PropTypes.string,
+ overrideClassName: PropTypes.bool,
+ title: PropTypes.string,
+ children: PropTypes.node,
+ }
+
+ render () {
+ const { className, overrideClassName, title } = this.props
+
+ return (
+ <div className={classnames({ 'card': !overrideClassName }, className)}>
+ <div className="card__title">
+ { title }
+ </div>
+ { this.props.children }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/card/index.js b/ui/app/components/card/index.js
new file mode 100644
index 000000000..c3ca6e3f4
--- /dev/null
+++ b/ui/app/components/card/index.js
@@ -0,0 +1 @@
+export { default } from './card.component'
diff --git a/ui/app/components/card/index.scss b/ui/app/components/card/index.scss
new file mode 100644
index 000000000..bde54a15e
--- /dev/null
+++ b/ui/app/components/card/index.scss
@@ -0,0 +1,11 @@
+.card {
+ border-radius: 4px;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 8px;
+
+ &__title {
+ border-bottom: 1px solid #d8d8d8;
+ padding-bottom: 4px;
+ text-transform: capitalize;
+ }
+}
diff --git a/ui/app/components/card/tests/card.component.test.js b/ui/app/components/card/tests/card.component.test.js
new file mode 100644
index 000000000..cea05033f
--- /dev/null
+++ b/ui/app/components/card/tests/card.component.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import Card from '../card.component'
+
+describe('Card Component', () => {
+ it('should render a card with a title and child element', () => {
+ const wrapper = shallow(
+ <Card
+ title="Test"
+ className="card-test-class"
+ >
+ <div className="child-test-class">Child</div>
+ </Card>
+ )
+
+ assert.ok(wrapper.hasClass('card-test-class'))
+ const title = wrapper.find('.card__title')
+ assert.ok(title)
+ assert.equal(title.text(), 'Test')
+ const child = wrapper.find('.child-test-class')
+ assert.ok(child)
+ assert.equal(child.text(), 'Child')
+ })
+})
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index de9aa6eb7..74e95ece6 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -2,11 +2,8 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Tabs, Tab } from '../../tabs'
-import {
- ConfirmPageContainerSummary,
- ConfirmPageContainerError,
- ConfirmPageContainerWarning,
-} from './'
+import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from './'
+import ErrorMessage from '../../error-message'
export default class ConfirmPageContainerContent extends Component {
static propTypes = {
@@ -95,7 +92,7 @@ export default class ConfirmPageContainerContent extends Component {
{
(errorKey || errorMessage) && (
<div className="confirm-page-container-content__error-container">
- <ConfirmPageContainerError
+ <ErrorMessage
errorMessage={errorMessage}
errorKey={errorKey}
/>
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
deleted file mode 100644
index 4ac95d0e3..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './confirm-page-container-error.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
index 1469dd438..4dfd89d92 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
@@ -1,4 +1,3 @@
export { default } from './confirm-page-container-content.component'
export { default as ConfirmPageContainerSummary } from './confirm-page-container-summary'
-export { default as ConfirmPageContainerError } from './confirm-page-container-error'
export { default as ConfirmPageContainerWarning } from './confirm-page-container-warning'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
index 39797a43f..698e624f4 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
@@ -1,5 +1,3 @@
-@import './confirm-page-container-error/index';
-
@import './confirm-page-container-warning/index';
@import './confirm-page-container-summary/index';
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 b1582051e..36d5a1f58 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
@@ -41,7 +41,9 @@ export default class ConfirmPageContainer extends Component {
assetImage: PropTypes.string,
summaryComponent: PropTypes.node,
warning: PropTypes.string,
+ unapprovedTxCount: PropTypes.number,
// Footer
+ onCancelAll: PropTypes.func,
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
disabled: PropTypes.bool,
@@ -67,10 +69,12 @@ export default class ConfirmPageContainer extends Component {
summaryComponent,
detailsComponent,
dataComponent,
+ onCancelAll,
onCancel,
onSubmit,
identiconAddress,
nonce,
+ unapprovedTxCount,
assetImage,
warning,
} = this.props
@@ -112,11 +116,18 @@ export default class ConfirmPageContainer extends Component {
}
<PageContainerFooter
onCancel={() => onCancel()}
+ cancelText={this.context.t('reject')}
onSubmit={() => onSubmit()}
submitText={this.context.t('confirm')}
submitButtonType="confirm"
disabled={disabled}
- />
+ >
+ {unapprovedTxCount > 1 && (
+ <a onClick={() => onCancelAll()}>
+ {this.context.t('rejectTxsN', [unapprovedTxCount])}
+ </a>
+ )}
+ </PageContainerFooter>
</div>
)
}
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 389791b42..e4eb58a2a 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -1,13 +1,18 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
-import { ETH } from '../../constants/common'
+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 () {
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index b8a738c65..6644a1099 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -3,13 +3,15 @@ import CurrencyDisplay from './currency-display.component'
import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
const mapStateToProps = (state, ownProps) => {
- const { value, numberOfDecimals = 2, currency } = 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 })
+ const convertedValue = getValueFromWeiHex({
+ value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
+ })
const formattedValue = formatCurrency(convertedValue, toCurrency)
- const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}`
+ const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
return {
displayValue,
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
index 474ce5378..5265bbb04 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/ui/app/components/currency-display/tests/currency-display.container.test.js
@@ -51,6 +51,50 @@ describe('CurrencyDisplay container', () => {
displayValue: '1.266 ETH',
},
},
+ {
+ props: {
+ value: '0x1193461d01595930',
+ currency: 'ETH',
+ numberOfDecimals: 3,
+ hideLabel: true,
+ },
+ result: {
+ displayValue: '1.266',
+ },
+ },
+ {
+ props: {
+ value: '0x3b9aca00',
+ currency: 'ETH',
+ denomination: 'GWEI',
+ hideLabel: true,
+ },
+ result: {
+ displayValue: '1',
+ },
+ },
+ {
+ props: {
+ value: '0x3b9aca00',
+ currency: 'ETH',
+ denomination: 'WEI',
+ hideLabel: true,
+ },
+ result: {
+ displayValue: '1000000000',
+ },
+ },
+ {
+ props: {
+ value: '0x3b9aca00',
+ currency: 'ETH',
+ numberOfDecimals: 100,
+ hideLabel: true,
+ },
+ result: {
+ displayValue: '1e-9',
+ },
+ },
]
tests.forEach(({ props, result }) => {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index c255fd64d..e67fbe45b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
const GasModalCard = require('./gas-modal-card')
+import Button from '../button'
const ethUtil = require('ethereumjs-util')
@@ -353,16 +354,16 @@ CustomizeGasModal.prototype.render = function () {
}, [this.context.t('revert')]),
h('div.send-v2__customize-gas__buttons', [
- h('button.btn-default.send-v2__customize-gas__cancel', {
+ h(Button, {
+ type: 'default',
+ className: 'send-v2__customize-gas__cancel',
onClick: this.props.hideModal,
- style: {
- marginRight: '10px',
- },
}, [this.context.t('cancel')]),
-
- h('button.btn-primary.send-v2__customize-gas__save', {
+ h(Button, {
+ type: 'primary',
+ className: 'send-v2__customize-gas__save',
onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
- className: error && 'btn-primary--disabled',
+ disabled: error,
}, [this.context.t('save')]),
]),
diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js
new file mode 100644
index 000000000..7476cfdd9
--- /dev/null
+++ b/ui/app/components/dropdowns/account-details-dropdown.js
@@ -0,0 +1,109 @@
+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 actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const genAccountLink = require('../../../lib/account-link.js')
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+AccountDetailsDropdown.contextTypes = {
+ t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
+
+function mapStateToProps (state) {
+ return {
+ selectedIdentity: getSelectedIdentity(state),
+ network: state.metamask.network,
+ keyrings: state.metamask.keyrings,
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ showAccountDetailModal: () => {
+ dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+ },
+ viewOnEtherscan: (address, network) => {
+ global.platform.openWindow({ url: genAccountLink(address, network) })
+ },
+ showRemoveAccountConfirmationModal: (identity) => {
+ return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
+ },
+ }
+}
+
+inherits(AccountDetailsDropdown, Component)
+function AccountDetailsDropdown () {
+ Component.call(this)
+
+ this.onClose = this.onClose.bind(this)
+}
+
+AccountDetailsDropdown.prototype.onClose = function (e) {
+ e.stopPropagation()
+ this.props.onClose()
+}
+
+AccountDetailsDropdown.prototype.render = function () {
+ const {
+ selectedIdentity,
+ network,
+ keyrings,
+ showAccountDetailModal,
+ viewOnEtherscan,
+ showRemoveAccountConfirmationModal } = this.props
+
+ const address = selectedIdentity.address
+
+ const keyring = keyrings.find((kr) => {
+ return kr.accounts.includes(address)
+ })
+
+ const isRemovable = keyring.type !== 'HD Key Tree'
+
+ return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
+ h(CloseArea, {
+ onClick: this.onClose,
+ }),
+ h(Item, {
+ onClick: (e) => {
+ e.stopPropagation()
+ global.platform.openExtensionInBrowser()
+ this.props.onClose()
+ },
+ text: this.context.t('expandView'),
+ icon: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }),
+ }),
+ h(Item, {
+ onClick: (e) => {
+ e.stopPropagation()
+ showAccountDetailModal()
+ this.props.onClose()
+ },
+ text: this.context.t('accountDetails'),
+ icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }),
+ }),
+ h(Item, {
+ onClick: (e) => {
+ e.stopPropagation()
+ viewOnEtherscan(address, network)
+ this.props.onClose()
+ },
+ text: this.context.t('viewOnEtherscan'),
+ icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
+ }),
+ isRemovable ? h(Item, {
+ onClick: (e) => {
+ e.stopPropagation()
+ showRemoveAccountConfirmationModal(selectedIdentity)
+ this.props.onClose()
+ },
+ text: this.context.t('removeAccount'),
+ icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }),
+ }) : null,
+ ])
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 63a30dd82..b252b25d9 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) {
setRpcTarget: (target) => {
dispatch(actions.setRpcTarget(target))
},
+ delRpcTarget: (target) => {
+ dispatch(actions.delRpcTarget(target))
+ },
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
}
@@ -300,6 +303,13 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
},
}, rpc),
+ h('i.fa.fa-times.delete',
+ {
+ onClick: (e) => {
+ e.stopPropagation()
+ props.delRpcTarget(rpc)
+ },
+ }),
]
)
}
diff --git a/ui/app/components/dropdowns/tests/dropdown.test.js b/ui/app/components/dropdowns/tests/dropdown.test.js
new file mode 100644
index 000000000..2b026589a
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/dropdown.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { DropdownMenuItem } from '../components/dropdown.js'
+
+describe('', () => {
+ let wrapper
+ const onClickSpy = sinon.spy()
+ const closeMenuSpy = sinon.spy()
+
+ beforeEach(() => {
+ wrapper = shallow(
+ <DropdownMenuItem
+ onClick = {onClickSpy}
+ style = {{test: 'style'}}
+ closeMenu = {closeMenuSpy}
+ >
+ </DropdownMenuItem>
+ )
+ })
+
+ it('renders li with dropdown-menu-item class', () => {
+ assert.equal(wrapper.find('li.dropdown-menu-item').length, 1)
+ })
+
+ it('adds style based on props passed', () => {
+ assert.equal(wrapper.prop('style').test, 'style')
+ })
+
+ it('simulates click event and calls onClick and closeMenu', () => {
+ wrapper.prop('onClick')()
+ assert.equal(onClickSpy.callCount, 1)
+ assert.equal(closeMenuSpy.callCount, 1)
+ })
+
+})
diff --git a/ui/app/components/dropdowns/tests/menu.test.js b/ui/app/components/dropdowns/tests/menu.test.js
new file mode 100644
index 000000000..9f5f13f00
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/menu.test.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { Menu, Item, Divider, CloseArea } from '../components/menu'
+
+describe('Dropdown Menu Components', () => {
+
+ describe('Menu', () => {
+ let wrapper
+
+ beforeEach(() => {
+ wrapper = shallow(
+ <Menu className = {'Test Class'} isShowing = {true}/>
+ )
+ })
+
+ it('adds prop className to menu', () => {
+ assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class')
+ })
+
+ })
+
+ describe('Item', () => {
+ let wrapper
+
+ const onClickSpy = sinon.spy()
+
+ beforeEach(() => {
+ wrapper = shallow(
+ <Item
+ icon = {'test icon'}
+ text = {'test text'}
+ className = {'test className'}
+ onClick = {onClickSpy}
+ />
+ )
+ })
+
+ it('add className based on props', () => {
+ assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item menu__item test className menu__item--clickable')
+ })
+
+ it('simulates onClick called', () => {
+ wrapper.find('.menu__item').prop('onClick')()
+ assert.equal(onClickSpy.callCount, 1)
+ })
+
+ it('adds icon based on icon props', () => {
+ assert.equal(wrapper.find('.menu__item__icon').text(), 'test icon')
+ })
+
+ it('adds html text based on text props', () => {
+ assert.equal(wrapper.find('.menu__item__text').text(), 'test text')
+ })
+ })
+
+ describe('Divider', () => {
+ let wrapper
+
+ before(() => {
+ wrapper = shallow(<Divider />)
+ })
+
+ it('renders menu divider', () => {
+ assert.equal(wrapper.find('.menu__divider').length, 1)
+ })
+ })
+
+ describe('CloseArea', () => {
+ let wrapper
+
+ const onClickSpy = sinon.spy()
+
+ beforeEach(() => {
+ wrapper = shallow(<CloseArea
+ onClick = {onClickSpy}
+ />)
+ })
+
+ it('simulates click', () => {
+ wrapper.prop('onClick')()
+ assert.equal(onClickSpy.callCount, 1)
+ })
+ })
+
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js b/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
new file mode 100644
index 000000000..67b192c11
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown Icon', () => {
+ let wrapper
+
+ beforeEach(() => {
+ wrapper = shallow(<NetworkDropdownIcon
+ backgroundColor = {'red'}
+ isSelected = {false}
+ innerBorder = {'none'}
+ diameter = {'12'}
+ />)
+ })
+
+ it('adds style props based on props', () => {
+ const styleProp = wrapper.find('.menu-icon-circle').children().prop('style')
+ assert.equal(styleProp.background, 'red')
+ assert.equal(styleProp.border, 'none')
+ assert.equal(styleProp.height, '12px')
+ assert.equal(styleProp.width, '12px')
+ })
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js
new file mode 100644
index 000000000..699b54605
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/network-dropdown.test.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import assert from 'assert'
+import { createMockStore } from 'redux-test-utils'
+import { mountWithRouter } from '../../../../../test/lib/render-helpers'
+import NetworkDropdown from '../network-dropdown'
+import { DropdownMenuItem } from '../components/dropdown'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown', () => {
+ let wrapper
+
+ describe('NetworkDropdown in appState in false', () => {
+ const mockState = {
+ metamask: {
+ provider: {
+ type: 'test',
+ },
+ },
+ appState: {
+ networkDropdown: false,
+ },
+ }
+
+ const store = createMockStore(mockState)
+
+ beforeEach(() => {
+ wrapper = mountWithRouter(
+ <NetworkDropdown store={store} />
+ )
+ })
+
+ it('checks for network droppo class', () => {
+ assert.equal(wrapper.find('.network-droppo').length, 1)
+ })
+
+ it('renders only one child when networkDropdown is false in state', () => {
+ assert.equal(wrapper.children().length, 1)
+ })
+
+ })
+
+ describe('NetworkDropdown in appState is true', () => {
+ const mockState = {
+ metamask: {
+ provider: {
+ 'type': 'test',
+ },
+ frequentRpcList: [
+ 'http://localhost:7545',
+ ],
+ },
+ appState: {
+ 'networkDropdownOpen': true,
+ },
+ }
+ const store = createMockStore(mockState)
+
+ beforeEach(() => {
+ wrapper = mountWithRouter(
+ <NetworkDropdown store={store}/>,
+ )
+ })
+
+ it('renders 7 DropDownMenuItems ', () => {
+ assert.equal(wrapper.find(DropdownMenuItem).length, 7)
+ })
+
+ it('checks background color for first NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main Ethereum Network Teal
+ })
+
+ it('checks background color for second NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(1).prop('backgroundColor'), '#ff4a8d') // Ropsten Red
+ })
+
+ it('checks background color for third NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(2).prop('backgroundColor'), '#7057ff') // Kovan Purple
+ })
+
+ it('checks background color for fourth NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow
+ })
+
+ it('checks background color for fifth NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
+ })
+
+ it('checks dropdown for frequestRPCList from state ', () => {
+ assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
+ })
+
+ it('checks background color for sixth NetworkDropdownIcon', () => {
+ assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
+ })
+
+ })
+})
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 5a794c7c1..8a072b1bc 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -5,7 +5,6 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
const genAccountLink = require('etherscan-link').createAccountLink
-const copyToClipboard = require('copy-to-clipboard')
const { Menu, Item, CloseArea } = require('./components/menu')
TokenMenuDropdown.contextTypes = {
@@ -59,14 +58,6 @@ TokenMenuDropdown.prototype.render = function () {
h(Item, {
onClick: (e) => {
e.stopPropagation()
- copyToClipboard(this.props.token.address)
- this.props.onClose()
- },
- text: this.context.t('copyContractAddress'),
- }),
- h(Item, {
- onClick: (e) => {
- e.stopPropagation()
const url = genAccountLink(this.props.token.address, this.props.network)
global.platform.openWindow({ url })
this.props.onClose()
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js b/ui/app/components/error-message/error-message.component.js
index 4965d7b4e..b4464c33b 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
+++ b/ui/app/components/error-message/error-message.component.js
@@ -1,30 +1,30 @@
import React from 'react'
import PropTypes from 'prop-types'
-const ConfirmPageContainerError = (props, context) => {
+const ErrorMessage = (props, context) => {
const { errorMessage, errorKey } = props
const error = errorKey ? context.t(errorKey) : errorMessage
return (
- <div className="confirm-page-container-error">
+ <div className="error-message">
<img
src="/images/alert-red.svg"
- className="confirm-page-container-error__icon"
+ className="error-message__icon"
/>
- <div className="confirm-page-container-error__text">
+ <div className="error-message__text">
{ `ALERT: ${error}` }
</div>
</div>
)
}
-ConfirmPageContainerError.propTypes = {
+ErrorMessage.propTypes = {
errorMessage: PropTypes.string,
errorKey: PropTypes.string,
}
-ConfirmPageContainerError.contextTypes = {
+ErrorMessage.contextTypes = {
t: PropTypes.func,
}
-export default ConfirmPageContainerError
+export default ErrorMessage
diff --git a/ui/app/components/error-message/index.js b/ui/app/components/error-message/index.js
new file mode 100644
index 000000000..1c97a9955
--- /dev/null
+++ b/ui/app/components/error-message/index.js
@@ -0,0 +1 @@
+export { default } from './error-message.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss b/ui/app/components/error-message/index.scss
index 89ff25578..5915e21cf 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
+++ b/ui/app/components/error-message/index.scss
@@ -1,4 +1,4 @@
-.confirm-page-container-error {
+.error-message {
min-height: 32px;
border: 1px solid $monzo;
color: $monzo;
diff --git a/ui/app/components/error-message/tests/error-message.component.test.js b/ui/app/components/error-message/tests/error-message.component.test.js
new file mode 100644
index 000000000..8c5347173
--- /dev/null
+++ b/ui/app/components/error-message/tests/error-message.component.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ErrorMessage from '../error-message.component'
+
+describe('ErrorMessage Component', () => {
+ const t = key => `translate ${key}`
+
+ it('should render a message from props.errorMessage', () => {
+ const wrapper = shallow(
+ <ErrorMessage
+ errorMessage="This is an error."
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.error-message').length, 1)
+ assert.equal(wrapper.find('.error-message__icon').length, 1)
+ assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: This is an error.')
+ })
+
+ it('should render a message translated from props.errorKey', () => {
+ const wrapper = shallow(
+ <ErrorMessage
+ errorKey="testKey"
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.error-message').length, 1)
+ assert.equal(wrapper.find('.error-message__icon').length, 1)
+ assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: translate testKey')
+ })
+})
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
deleted file mode 100644
index 75303a34a..000000000
--- a/ui/app/components/hex-as-decimal-input.js
+++ /dev/null
@@ -1,161 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-const extend = require('xtend')
-const connect = require('react-redux').connect
-
-HexAsDecimalInput.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(HexAsDecimalInput)
-
-
-inherits(HexAsDecimalInput, Component)
-function HexAsDecimalInput () {
- this.state = { invalid: null }
- Component.call(this)
-}
-
-/* Hex as Decimal Input
- *
- * A component for allowing easy, decimal editing
- * of a passed in hex string value.
- *
- * On change, calls back its `onChange` function parameter
- * and passes it an updated hex string.
- */
-
-HexAsDecimalInput.prototype.render = function () {
- const props = this.props
- const state = this.state
-
- const { value, onChange, min, max } = props
-
- const toEth = props.toEth
- const suffix = props.suffix
- const decimalValue = decimalize(value, toEth)
- const style = props.style
-
- return (
- h('.flex-column', [
- h('.flex-row', {
- style: {
- alignItems: 'flex-end',
- lineHeight: '13px',
- fontFamily: 'Montserrat Light',
- textRendering: 'geometricPrecision',
- },
- }, [
- h('input.hex-input', {
- type: 'number',
- required: true,
- min: min,
- max: max,
- style: extend({
- display: 'block',
- textAlign: 'right',
- backgroundColor: 'transparent',
- border: '1px solid #bdbdbd',
-
- }, style),
- value: parseInt(decimalValue),
- onBlur: (event) => {
- this.updateValidity(event)
- },
- onChange: (event) => {
- this.updateValidity(event)
- const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
- onChange(hexString)
- },
- onInvalid: (event) => {
- const msg = this.constructWarning()
- if (msg === state.invalid) {
- return
- }
- this.setState({ invalid: msg })
- event.preventDefault()
- return false
- },
- }),
- h('div', {
- style: {
- color: ' #AEAEAE',
- fontSize: '12px',
- marginLeft: '5px',
- marginRight: '6px',
- width: '20px',
- },
- }, suffix),
- ]),
-
- state.invalid ? h('span.error', {
- style: {
- position: 'absolute',
- right: '0px',
- textAlign: 'right',
- transform: 'translateY(26px)',
- padding: '3px',
- background: 'rgba(255,255,255,0.85)',
- zIndex: '1',
- textTransform: 'capitalize',
- border: '2px solid #E20202',
- },
- }, state.invalid) : null,
- ])
- )
-}
-
-HexAsDecimalInput.prototype.setValid = function (message) {
- this.setState({ invalid: null })
-}
-
-HexAsDecimalInput.prototype.updateValidity = function (event) {
- const target = event.target
- const value = this.props.value
- const newValue = target.value
-
- if (value === newValue) {
- return
- }
-
- const valid = target.checkValidity()
- if (valid) {
- this.setState({ invalid: null })
- }
-}
-
-HexAsDecimalInput.prototype.constructWarning = function () {
- const { name, min, max } = this.props
- let message = name ? name + ' ' : ''
-
- if (min && max) {
- message += this.context.t('betweenMinAndMax', [min, max])
- } else if (min) {
- message += this.context.t('greaterThanMin', [min])
- } else if (max) {
- message += this.context.t('lessThanMax', [max])
- } else {
- message += this.context.t('invalidInput')
- }
-
- return message
-}
-
-function hexify (decimalString) {
- const hexBN = new BN(parseInt(decimalString), 10)
- return '0x' + hexBN.toString('hex')
-}
-
-function decimalize (input, toEth) {
- if (input === '') {
- return ''
- } else {
- const strippedInput = ethUtil.stripHexPrefix(input)
- const inputBN = new BN(strippedInput, 'hex')
- return inputBN.toString(10)
- }
-}
diff --git a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
new file mode 100644
index 000000000..6847a6919
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { hexToDecimal } from '../../helpers/conversions.util'
+
+export default class HexToDecimal extends PureComponent {
+ static propTypes = {
+ className: PropTypes.string,
+ value: PropTypes.string,
+ }
+
+ render () {
+ const { className, value } = this.props
+ const decimalValue = hexToDecimal(value)
+
+ return (
+ <div className={className}>
+ { decimalValue }
+ </div>
+ )
+ }
+}
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(<HexToDecimal
+ value="0x3039"
+ className="hex-to-decimal"
+ />)
+
+ assert.ok(wrapper.hasClass('hex-to-decimal'))
+ assert.equal(wrapper.text(), '12345')
+ })
+
+ it('should render an unprefixed hex as a decimal with a className', () => {
+ const wrapper = shallow(<HexToDecimal
+ value="1A85"
+ className="hex-to-decimal"
+ />)
+
+ assert.ok(wrapper.hasClass('hex-to-decimal'))
+ assert.equal(wrapper.text(), '6789')
+ })
+})
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 076e65b81..7bd921892 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -56,6 +56,7 @@ IdenticonComponent.prototype.render = function () {
})
} else {
return h('img.balance-icon', {
+ className,
src: './images/eth_logo.svg',
style: {
...style,
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index cb4065fd9..21b65bf55 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -2,14 +2,20 @@
@import './button-group/index';
+@import './card/index';
+
@import './confirm-page-container/index';
+@import './error-message/index';
+
@import './export-text-container/index';
@import './info-box/index';
@import './menu-bar/index';
+@import './modal/index';
+
@import './modals/index';
@import './network-display/index';
@@ -24,6 +30,10 @@
@import './tabs/index';
+@import './transaction-activity-log/index';
+
+@import './transaction-breakdown/index';
+
@import './transaction-view/index';
@import './transaction-view-balance/index';
@@ -32,6 +42,8 @@
@import './transaction-list-item/index';
+@import './transaction-list-item-details/index';
+
@import './transaction-status/index';
@import './app-header/index';
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index 59c6842ef..eec5e3740 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -66,13 +66,16 @@ InputNumber.prototype.render = function () {
}),
h('span.gas-tooltip-input-detail', {}, [unitLabel]),
h('div.gas-tooltip-input-arrows', {}, [
- h('i.fa.fa-angle-up', {
+ h('div.gas-tooltip-input-arrow-wrapper', {
onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
- }),
- h('i.fa.fa-angle-down', {
- style: { cursor: 'pointer' },
+ }, [
+ h('i.fa.fa-angle-up'),
+ ]),
+ h('div.gas-tooltip-input-arrow-wrapper', {
onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
- }),
+ }, [
+ h('i.fa.fa-angle-down'),
+ ]),
]),
])
}
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
index eee9feebb..7460e8dd5 100644
--- a/ui/app/components/menu-bar/menu-bar.component.js
+++ b/ui/app/components/menu-bar/menu-bar.component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tooltip from '../tooltip'
import SelectedAccount from '../selected-account'
+import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
export default class MenuBar extends PureComponent {
static contextTypes = {
@@ -15,9 +16,12 @@ export default class MenuBar extends PureComponent {
showSidebar: PropTypes.func,
}
+ state = { accountDetailsMenuOpen: false }
+
render () {
const { t } = this.context
const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
+ const { accountDetailsMenuOpen } = this.state
return (
<div className="menu-bar">
@@ -34,18 +38,25 @@ export default class MenuBar extends PureComponent {
{
!isMascara && (
<Tooltip
- title={t('openInTab')}
+ title={t('accountOptions')}
position="bottom"
>
<div
- className="menu-bar__open-in-browser"
- onClick={() => global.platform.openExtensionInBrowser()}
+ className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+ onClick={() => this.setState({ accountDetailsMenuOpen: true })}
>
- <img src="images/popout.svg" />
</div>
</Tooltip>
)
}
+ {
+ accountDetailsMenuOpen && (
+ <AccountDetailsDropdown
+ className="menu-bar__account-details-dropdown"
+ onClose={() => this.setState({ accountDetailsMenuOpen: false })}
+ />
+ )
+ }
</div>
)
}
diff --git a/ui/app/components/modal/index.js b/ui/app/components/modal/index.js
new file mode 100644
index 000000000..58309abbe
--- /dev/null
+++ b/ui/app/components/modal/index.js
@@ -0,0 +1,2 @@
+export { default } from './modal.component'
+export { default as ModalContent } from './modal-content'
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
new file mode 100644
index 000000000..2beb14633
--- /dev/null
+++ b/ui/app/components/modal/index.scss
@@ -0,0 +1,62 @@
+@import './modal-content/index';
+
+.modal-container {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: flex;
+ flex-flow: column;
+ border-radius: 8px;
+
+ @media screen and (max-width: 575px) {
+ max-height: 450px;
+ }
+
+ &__content {
+ overflow-y: auto;
+ flex: 1;
+ padding: 16px 32px;
+
+ @media screen and (max-width: 575px) {
+ justify-content: center;
+ padding: 28px 20px;
+ }
+ }
+
+ &__header {
+ position: relative;
+ display: flex;
+ padding: 12px;
+ justify-content: center;
+ border-bottom: 1px solid #d2d8dd;
+ flex: 0 0 auto;
+ }
+
+ &__header-close::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $dusty-gray;
+ position: absolute;
+ top: -5px;
+ right: 10px;
+ cursor: pointer;
+ }
+
+ &__footer {
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ border-top: 1px solid #d2d8dd;
+ padding: 16px;
+ flex: 0 0 auto;
+
+ &-button {
+ min-width: 0;
+ margin-right: 16px;
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+ }
+ }
+}
diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js
new file mode 100644
index 000000000..733cfb3b8
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.js
@@ -0,0 +1 @@
+export { default } from './modal-content.component'
diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss
new file mode 100644
index 000000000..560505b84
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.scss
@@ -0,0 +1,19 @@
+.modal-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px 0;
+
+ &__title {
+ font-size: 1.5rem;
+ font-weight: 500;
+ padding: 16px 0;
+ text-align: center;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+}
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
new file mode 100644
index 000000000..ecec0ee5b
--- /dev/null
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ModalContent extends PureComponent {
+ static propTypes = {
+ title: PropTypes.string,
+ description: PropTypes.string,
+ }
+
+ render () {
+ const { title, description } = this.props
+
+ return (
+ <div className="modal-content">
+ {
+ title && (
+ <div className="modal-content__title">
+ { title }
+ </div>
+ )
+ }
+ {
+ description && (
+ <div className="modal-content__description">
+ { description }
+ </div>
+ )
+ }
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
new file mode 100644
index 000000000..17af09f45
--- /dev/null
+++ b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ModalContent from '../modal-content.component'
+
+describe('ModalContent Component', () => {
+ it('should render a title', () => {
+ const wrapper = shallow(
+ <ModalContent
+ title="Modal Title"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 1)
+ assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+ assert.equal(wrapper.find('.modal-content__description').length, 0)
+ })
+
+ it('should render a description', () => {
+ const wrapper = shallow(
+ <ModalContent
+ description="Modal Description"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 0)
+ assert.equal(wrapper.find('.modal-content__description').length, 1)
+ assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+ })
+
+ it('should render both a title and a description', () => {
+ const wrapper = shallow(
+ <ModalContent
+ title="Modal Title"
+ description="Modal Description"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 1)
+ assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+ assert.equal(wrapper.find('.modal-content__description').length, 1)
+ assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+ })
+})
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
new file mode 100644
index 000000000..2a75b559b
--- /dev/null
+++ b/ui/app/components/modal/modal.component.js
@@ -0,0 +1,80 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+
+export default class Modal extends PureComponent {
+ static propTypes = {
+ children: PropTypes.node,
+ // Header text
+ headerText: PropTypes.string,
+ onClose: PropTypes.func,
+ // Submit button (right button)
+ onSubmit: PropTypes.func,
+ submitType: PropTypes.string,
+ submitText: PropTypes.string,
+ // Cancel button (left button)
+ onCancel: PropTypes.func,
+ cancelType: PropTypes.string,
+ cancelText: PropTypes.string,
+ }
+
+ static defaultProps = {
+ submitType: 'primary',
+ cancelType: 'default',
+ }
+
+ render () {
+ const {
+ children,
+ headerText,
+ onClose,
+ onSubmit,
+ submitType,
+ submitText,
+ onCancel,
+ cancelType,
+ cancelText,
+ } = this.props
+
+ return (
+ <div className="modal-container">
+ {
+ headerText && (
+ <div className="modal-container__header">
+ <div className="modal-container__header-text">
+ { headerText }
+ </div>
+ <div
+ className="modal-container__header-close"
+ onClick={onClose}
+ />
+ </div>
+ )
+ }
+ <div className="modal-container__content">
+ { children }
+ </div>
+ <div className="modal-container__footer">
+ {
+ onCancel && (
+ <Button
+ type={cancelType}
+ onClick={onCancel}
+ className="modal-container__footer-button"
+ >
+ { cancelText }
+ </Button>
+ )
+ }
+ <Button
+ type={submitType}
+ onClick={onSubmit}
+ className="modal-container__footer-button"
+ >
+ { submitText }
+ </Button>
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
new file mode 100644
index 000000000..8cce1a808
--- /dev/null
+++ b/ui/app/components/modal/tests/modal.component.test.js
@@ -0,0 +1,103 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Modal from '../modal.component'
+import Button from '../../button'
+
+describe('Modal Component', () => {
+ it('should render a modal with a submit button', () => {
+ const wrapper = shallow(<Modal />)
+
+ assert.equal(wrapper.find('.modal-container').length, 1)
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 1)
+ assert.equal(buttons.at(0).props().type, 'primary')
+ })
+
+ it('should render a modal with a cancel and a submit button', () => {
+ const handleCancel = sinon.spy()
+ const handleSubmit = sinon.spy()
+ const wrapper = shallow(
+ <Modal
+ onCancel={handleCancel}
+ cancelText="Cancel"
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ />
+ )
+
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 2)
+ const cancelButton = buttons.at(0)
+ const submitButton = buttons.at(1)
+
+ assert.equal(cancelButton.props().type, 'default')
+ assert.equal(cancelButton.props().children, 'Cancel')
+ assert.equal(handleCancel.callCount, 0)
+ cancelButton.simulate('click')
+ assert.equal(handleCancel.callCount, 1)
+
+ assert.equal(submitButton.props().type, 'primary')
+ assert.equal(submitButton.props().children, 'Submit')
+ assert.equal(handleSubmit.callCount, 0)
+ submitButton.simulate('click')
+ assert.equal(handleSubmit.callCount, 1)
+ })
+
+ it('should render a modal with different button types', () => {
+ const wrapper = shallow(
+ <Modal
+ onCancel={() => {}}
+ cancelText="Cancel"
+ cancelType="secondary"
+ onSubmit={() => {}}
+ submitText="Submit"
+ submitType="confirm"
+ />
+ )
+
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 2)
+ assert.equal(buttons.at(0).props().type, 'secondary')
+ assert.equal(buttons.at(1).props().type, 'confirm')
+ })
+
+ it('should render a modal with children', () => {
+ const wrapper = shallow(
+ <Modal
+ onCancel={() => {}}
+ cancelText="Cancel"
+ onSubmit={() => {}}
+ submitText="Submit"
+ >
+ <div className="test-child" />
+ </Modal>
+ )
+
+ assert.ok(wrapper.find('.test-class'))
+ })
+
+ it('should render a modal with a header', () => {
+ const handleCancel = sinon.spy()
+ const handleSubmit = sinon.spy()
+ const wrapper = shallow(
+ <Modal
+ onCancel={handleCancel}
+ cancelText="Cancel"
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ headerText="My Header"
+ onClose={handleCancel}
+ />
+ )
+
+ assert.ok(wrapper.find('.modal-container__header'))
+ assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
+ assert.equal(handleCancel.callCount, 0)
+ assert.equal(handleSubmit.callCount, 0)
+ wrapper.find('.modal-container__header-close').simulate('click')
+ assert.equal(handleCancel.callCount, 1)
+ assert.equal(handleSubmit.callCount, 0)
+ })
+})
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 0bbabf38d..d22230e32 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js')
const QrView = require('../qr-code')
const EditableLabel = require('../editable-label')
+import Button from '../button'
+
function mapStateToProps (state) {
return {
network: state.metamask.network,
@@ -81,12 +83,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: genAccountLink(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/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
new file mode 100644
index 000000000..b082db1d0
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../currency-display'
+import { ETH } from '../../../../constants/common'
+
+export default class CancelTransaction extends PureComponent {
+ static propTypes = {
+ value: PropTypes.string,
+ }
+
+ render () {
+ const { value } = this.props
+
+ return (
+ <div className="cancel-transaction-gas-fee">
+ <CurrencyDisplay
+ className="cancel-transaction-gas-fee__eth"
+ currency={ETH}
+ value={value}
+ numberOfDecimals={6}
+ />
+ <CurrencyDisplay
+ className="cancel-transaction-gas-fee__fiat"
+ value={value}
+ />
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
new file mode 100644
index 000000000..1a9ae2e07
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction-gas-fee.component'
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
new file mode 100644
index 000000000..ce81dd448
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
@@ -0,0 +1,17 @@
+.cancel-transaction-gas-fee {
+ background: #F1F4F9;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 12px;
+
+ &__eth {
+ font-size: 1.5rem;
+ font-weight: 500;
+ }
+
+ &__fiat {
+ font-size: .75rem;
+ }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
new file mode 100644
index 000000000..994c2a577
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component'
+import CurrencyDisplay from '../../../../currency-display'
+
+describe('CancelTransactionGasFee Component', () => {
+ it('should render', () => {
+ const wrapper = shallow(
+ <CancelTransactionGasFee
+ value="0x3b9aca00"
+ />
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+ const ethDisplay = wrapper.find(CurrencyDisplay).at(0)
+ const fiatDisplay = wrapper.find(CurrencyDisplay).at(1)
+
+ assert.equal(ethDisplay.props().value, '0x3b9aca00')
+ assert.equal(ethDisplay.props().currency, 'ETH')
+ assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth')
+
+ assert.equal(fiatDisplay.props().value, '0x3b9aca00')
+ assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat')
+ })
+})
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
new file mode 100644
index 000000000..8b00cb9b9
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import CancelTransactionGasFee from './cancel-transaction-gas-fee'
+import { SUBMITTED_STATUS } from '../../../constants/transactions'
+
+export default class CancelTransaction extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ createCancelTransaction: PropTypes.func,
+ hideModal: PropTypes.func,
+ showTransactionConfirmedModal: PropTypes.func,
+ transactionStatus: PropTypes.string,
+ newGasFee: PropTypes.string,
+ }
+
+ componentDidUpdate () {
+ const { transactionStatus, showTransactionConfirmedModal } = this.props
+
+ if (transactionStatus !== SUBMITTED_STATUS) {
+ showTransactionConfirmedModal()
+ return
+ }
+ }
+
+ handleSubmit = async () => {
+ const { createCancelTransaction, hideModal } = this.props
+
+ await createCancelTransaction()
+ hideModal()
+ }
+
+ handleCancel = () => {
+ this.props.hideModal()
+ }
+
+ render () {
+ const { t } = this.context
+ const { newGasFee } = this.props
+
+ return (
+ <Modal
+ headerText={t('attemptToCancel')}
+ onClose={this.handleCancel}
+ onSubmit={this.handleSubmit}
+ onCancel={this.handleCancel}
+ submitText={t('yesLetsTry')}
+ cancelText={t('nevermind')}
+ submitType="secondary"
+ >
+ <div>
+ <div className="cancel-transaction__title">
+ { t('cancellationGasFee') }
+ </div>
+ <div className="cancel-transaction__cancel-transaction-gas-fee-container">
+ <CancelTransactionGasFee value={newGasFee} />
+ </div>
+ <div className="cancel-transaction__description">
+ { t('attemptToCancelDescription') }
+ </div>
+ </div>
+ </Modal>
+ )
+ }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
new file mode 100644
index 000000000..eede8b1ee
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
@@ -0,0 +1,62 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ethUtil from 'ethereumjs-util'
+import { multiplyCurrencies } from '../../../conversion-util'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import CancelTransaction from './cancel-transaction.component'
+import { showModal, createCancelTransaction } from '../../../actions'
+import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
+
+const mapStateToProps = (state, ownProps) => {
+ const { metamask } = state
+ const { transactionId, originalGasPrice } = ownProps
+ const { selectedAddressTxList } = metamask
+ const transaction = selectedAddressTxList.find(({ id }) => id === transactionId)
+ const transactionStatus = transaction ? transaction.status : ''
+
+ const defaultNewGasPrice = ethUtil.addHexPrefix(
+ multiplyCurrencies(originalGasPrice, 1.1, {
+ toNumericBase: 'hex',
+ multiplicandBase: 16,
+ multiplierBase: 10,
+ })
+ )
+
+ const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' })
+
+ return {
+ transactionId,
+ transactionStatus,
+ originalGasPrice,
+ newGasFee,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ createCancelTransaction: txId => dispatch(createCancelTransaction(txId)),
+ showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
+ }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const { transactionId, ...restStateProps } = stateProps
+ const {
+ createCancelTransaction: dispatchCreateCancelTransaction,
+ ...restDispatchProps
+ } = dispatchProps
+
+ return {
+ ...restStateProps,
+ ...restDispatchProps,
+ ...ownProps,
+ createCancelTransaction: newGasPrice => {
+ return dispatchCreateCancelTransaction(transactionId, newGasPrice)
+ },
+ }
+}
+
+export default compose(
+ withModalProps,
+ connect(mapStateToProps, mapDispatchToProps, mergeProps),
+)(CancelTransaction)
diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/modals/cancel-transaction/index.js
new file mode 100644
index 000000000..7abc871ee
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction.container'
diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss
new file mode 100644
index 000000000..62e8e36fd
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.scss
@@ -0,0 +1,18 @@
+@import './cancel-transaction-gas-fee/index';
+
+.cancel-transaction {
+ &__title {
+ font-weight: 500;
+ padding-bottom: 16px;
+ text-align: center;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+
+ &__cancel-transaction-gas-fee-container {
+ margin-bottom: 16px;
+ }
+} \ No newline at end of file
diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
new file mode 100644
index 000000000..858fb01a8
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import CancelTransaction from '../cancel-transaction.component'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee'
+import Modal from '../../../modal'
+
+describe('CancelTransaction Component', () => {
+ const t = key => key
+
+ it('should render a CancelTransaction modal', () => {
+ const wrapper = shallow(
+ <CancelTransaction
+ newGasFee="0x1319718a5000"
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find(Modal).length, 1)
+ assert.equal(wrapper.find(CancelTransactionGasFee).length, 1)
+ assert.equal(wrapper.find(CancelTransactionGasFee).props().value, '0x1319718a5000')
+ assert.equal(wrapper.find('.cancel-transaction__title').text(), 'cancellationGasFee')
+ assert.equal(wrapper.find('.cancel-transaction__description').text(), 'attemptToCancelDescription')
+ })
+
+ it('should pass the correct props to the Modal component', async () => {
+ const createCancelTransactionSpy = sinon.stub().callsFake(() => Promise.resolve())
+ const hideModalSpy = sinon.spy()
+
+ const wrapper = shallow(
+ <CancelTransaction
+ defaultNewGasPrice="0x3b9aca00"
+ createCancelTransaction={createCancelTransactionSpy}
+ hideModal={hideModalSpy}
+ />,
+ { context: { t }}
+ )
+
+ assert.equal(wrapper.find(Modal).length, 1)
+ const modalProps = wrapper.find(Modal).props()
+
+ assert.equal(modalProps.headerText, 'attemptToCancel')
+ assert.equal(modalProps.submitText, 'yesLetsTry')
+ assert.equal(modalProps.cancelText, 'nevermind')
+
+ assert.equal(createCancelTransactionSpy.callCount, 0)
+ assert.equal(hideModalSpy.callCount, 0)
+ await modalProps.onSubmit()
+ assert.equal(createCancelTransactionSpy.callCount, 1)
+ assert.equal(hideModalSpy.callCount, 1)
+ modalProps.onCancel()
+ assert.equal(hideModalSpy.callCount, 2)
+ })
+})
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
index 5a9f0f289..195c55421 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
@@ -1,11 +1,11 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import Button from '../../button'
+import Modal from '../../modal'
import { addressSummary } from '../../../util'
import Identicon from '../../identicon'
import genAccountLink from '../../../../lib/account-link'
-class ConfirmRemoveAccount extends Component {
+export default class ConfirmRemoveAccount extends Component {
static propTypes = {
hideModal: PropTypes.func.isRequired,
removeAccount: PropTypes.func.isRequired,
@@ -17,30 +17,34 @@ class ConfirmRemoveAccount extends Component {
t: PropTypes.func,
}
- handleRemove () {
+ handleRemove = () => {
this.props.removeAccount(this.props.identity.address)
.then(() => this.props.hideModal())
}
+ handleCancel = () => {
+ this.props.hideModal()
+ }
+
renderSelectedAccount () {
const { identity } = this.props
return (
- <div className="modal-container__account">
- <div className="modal-container__account__identicon">
+ <div className="confirm-remove-account__account">
+ <div className="confirm-remove-account__account__identicon">
<Identicon
- address={identity.address}
- diameter={32}
+ address={identity.address}
+ diameter={32}
/>
</div>
- <div className="modal-container__account__name">
- <span className="modal-container__account__label">Name</span>
- <span className="account_value">{identity.name}</span>
+ <div className="confirm-remove-account__account__name">
+ <span className="confirm-remove-account__account__label">Name</span>
+ <span className="account_value">{identity.name}</span>
</div>
- <div className="modal-container__account__address">
- <span className="modal-container__account__label">Public Address</span>
- <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
+ <div className="confirm-remove-account__account__address">
+ <span className="confirm-remove-account__account__label">Public Address</span>
+ <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
</div>
- <div className="modal-container__account__link">
+ <div className="confirm-remove-account__account__link">
<a
className=""
href={genAccountLink(identity.address, this.props.network)}
@@ -58,36 +62,28 @@ class ConfirmRemoveAccount extends Component {
const { t } = this.context
return (
- <div className="modal-container">
- <div className="modal-container__content">
- <div className="modal-container__title">
- { `${t('removeAccount')}` }?
- </div>
- { this.renderSelectedAccount() }
- <div className="modal-container__description">
+ <Modal
+ headerText={`${t('removeAccount')}?`}
+ onClose={this.handleCancel}
+ onSubmit={this.handleRemove}
+ onCancel={this.handleCancel}
+ submitText={t('remove')}
+ cancelText={t('nevermind')}
+ submitType="secondary"
+ >
+ <div>
+ { this.renderSelectedAccount() }
+ <div className="confirm-remove-account__description">
{ t('removeAccountDescription') }
- <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a>
+ <a
+ className="confirm-remove-account__link"
+ rel="noopener noreferrer"
+ target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
+ { t('learnMore') }
+ </a>
</div>
</div>
- <div className="modal-container__footer">
- <Button
- type="default"
- className="modal-container__footer-button"
- onClick={() => this.props.hideModal()}
- >
- { t('nevermind') }
- </Button>
- <Button
- type="secondary"
- className="modal-container__footer-button"
- onClick={() => this.handleRemove()}
- >
- { t('remove') }
- </Button>
- </div>
- </div>
+ </Modal>
)
}
}
-
-export default ConfirmRemoveAccount
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
index 4b194c995..45c6654ab 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
@@ -1,20 +1,22 @@
import { connect } from 'react-redux'
+import { compose } from 'recompose'
import ConfirmRemoveAccount from './confirm-remove-account.component'
-
-const { hideModal, removeAccount } = require('../../../actions')
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import { removeAccount } from '../../../actions'
const mapStateToProps = state => {
return {
- identity: state.appState.modal.modalState.props.identity,
network: state.metamask.network,
}
}
const mapDispatchToProps = dispatch => {
return {
- hideModal: () => dispatch(hideModal()),
removeAccount: (address) => dispatch(removeAccount(address)),
}
}
-export default connect(mapStateToProps, mapDispatchToProps)(ConfirmRemoveAccount)
+export default compose(
+ withModalProps,
+ connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmRemoveAccount)
diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js
index 9763fbe05..ecb5f7790 100644
--- a/ui/app/components/modals/confirm-remove-account/index.js
+++ b/ui/app/components/modals/confirm-remove-account/index.js
@@ -1,2 +1 @@
-import ConfirmRemoveAccount from './confirm-remove-account.container'
-module.exports = ConfirmRemoveAccount
+export { default } from './confirm-remove-account.container'
diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/modals/confirm-remove-account/index.scss
new file mode 100644
index 000000000..3be3a1967
--- /dev/null
+++ b/ui/app/components/modals/confirm-remove-account/index.scss
@@ -0,0 +1,58 @@
+.confirm-remove-account {
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+
+ &__account {
+ border: 1px solid #b7b7b7;
+ border-radius: 4px;
+ padding: 10px;
+ display: flex;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ width: 100%;
+
+ &__identicon {
+ margin-right: 10px;
+ }
+
+ &__name,
+ &__address {
+ margin-right: 10px;
+ font-size: 14px;
+ }
+
+ &__name {
+ width: 100px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__label {
+ font-size: 11px;
+ display: block;
+ color: #9b9b9b;
+ }
+
+ &__link {
+ margin-top: 14px;
+
+ img {
+ width: 15px;
+ height: 15px;
+ }
+ }
+
+ @media screen and (max-width: 575px) {
+ &__name {
+ width: 90px;
+ }
+ }
+ }
+
+ &__link {
+ color: #2f9ae0;
+ }
+} \ No newline at end of file
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
index 14a4da62a..f1a4542ac 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
-import Button from '../../button'
+import Modal, { ModalContent } from '../../modal'
-class ConfirmResetAccount extends Component {
+export default class ConfirmResetAccount extends PureComponent {
static propTypes = {
hideModal: PropTypes.func.isRequired,
resetAccount: PropTypes.func.isRequired,
@@ -12,7 +12,7 @@ class ConfirmResetAccount extends Component {
t: PropTypes.func,
}
- handleReset () {
+ handleReset = () => {
this.props.resetAccount()
.then(() => this.props.hideModal())
}
@@ -21,34 +21,18 @@ class ConfirmResetAccount extends Component {
const { t } = this.context
return (
- <div className="modal-container">
- <div className="modal-container__content">
- <div className="modal-container__title">
- { `${t('resetAccount')}?` }
- </div>
- <div className="modal-container__description">
- { t('resetAccountDescription') }
- </div>
- </div>
- <div className="modal-container__footer">
- <Button
- type="default"
- className="modal-container__footer-button"
- onClick={() => this.props.hideModal()}
- >
- { t('nevermind') }
- </Button>
- <Button
- type="secondary"
- className="modal-container__footer-button"
- onClick={() => this.handleReset()}
- >
- { t('reset') }
- </Button>
- </div>
- </div>
+ <Modal
+ onSubmit={this.handleReset}
+ onCancel={() => this.props.hideModal()}
+ submitText={t('reset')}
+ cancelText={t('nevermind')}
+ submitType="secondary"
+ >
+ <ModalContent
+ title={`${t('resetAccount')}?`}
+ description={t('resetAccountDescription')}
+ />
+ </Modal>
)
}
}
-
-export default ConfirmResetAccount
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
index 9630a5593..c8a7b8478 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
@@ -1,13 +1,16 @@
import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../higher-order-components/with-modal-props'
import ConfirmResetAccount from './confirm-reset-account.component'
-
-const { hideModal, resetAccount } = require('../../../actions')
+import { resetAccount } from '../../../actions'
const mapDispatchToProps = dispatch => {
return {
- hideModal: () => dispatch(hideModal()),
resetAccount: () => dispatch(resetAccount()),
}
}
-export default connect(null, mapDispatchToProps)(ConfirmResetAccount)
+export default compose(
+ withModalProps,
+ connect(null, mapDispatchToProps)
+)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js
index c812ffc55..ca4d9c5bf 100644
--- a/ui/app/components/modals/confirm-reset-account/index.js
+++ b/ui/app/components/modals/confirm-reset-account/index.js
@@ -1,2 +1 @@
-import ConfirmResetAccount from './confirm-reset-account.container'
-module.exports = ConfirmResetAccount
+export { default } from './confirm-reset-account.container'
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') }
</div>
<div className="customize-gas__buttons">
- <button
- className="btn-default customize-gas__cancel"
+ <Button
+ type="default"
+ className="customize-gas__cancel"
onClick={() => hideModal()}
style={{ marginRight: '10px' }}
>
{ t('cancel') }
- </button>
- <button
- className="btn-primary customize-gas__save"
+ </Button>
+ <Button
+ type="primary"
+ className="customize-gas__save"
onClick={() => this.handleSave()}
style={{ marginRight: '10px' }}
disabled={!valid}
>
{ t('save') }
- </button>
+ </Button>
</div>
</div>
</div>
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 60a416304..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors')
const ReadOnlyInput = require('../readonly-input')
const copyToClipboard = require('copy-to-clipboard')
const { checksumAddress } = require('../../util')
+import Button from '../button'
function mapStateToPropsFactory () {
let selectedIdentity = null
@@ -97,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'))
+ )
),
])
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index 0acccf172..45453a582 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -1,108 +1,9 @@
-@import './customize-gas/index';
-
-@import './qr-scanner/index';
-
-.modal-container {
- width: 100%;
- height: 100%;
- background-color: #fff;
- display: flex;
- flex-flow: column;
- border-radius: 8px;
-
- &__title {
- font-size: 1.5rem;
- font-weight: 500;
- padding: 16px 0;
- text-align: center;
- }
-
- &__description {
- text-align: center;
- font-size: .875rem;
- }
-
- &__account {
- border: 1px solid #b7b7b7;
- border-radius: 4px;
- padding: 10px;
- display: flex;
- margin-top: 10px;
- margin-bottom: 20px;
- width: 100%;
-
- &__identicon {
- margin-right: 10px;
- }
-
- &__name,
- &__address {
- margin-right: 10px;
- font-size: 14px;
- }
+@import './cancel-transaction/index';
- &__name {
- width: 100px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+@import './confirm-remove-account/index';
- &__label {
- font-size: 11px;
- display: block;
- color: #9b9b9b;
- }
-
- &__link {
- margin-top: 14px;
-
- img {
- width: 15px;
- height: 15px;
- }
- }
-
- @media screen and (max-width: 575px) {
- &__name {
- width: 90px;
- }
- }
- }
-
- &__link {
- color: #2f9ae0;
- }
-
- &__content {
- overflow-y: auto;
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 32px;
-
- @media screen and (max-width: 575px) {
- justify-content: center;
- padding: 28px 20px;
- }
- }
-
- &__footer {
- display: flex;
- flex-flow: row;
- justify-content: center;
- border-top: 1px solid #d2d8dd;
- padding: 16px;
- flex: 0 0 auto;
+@import './customize-gas/index';
- &-button {
- min-width: 0;
- margin-right: 16px;
+@import './qr-scanner/index';
- &:last-of-type {
- margin-right: 0;
- }
- }
- }
-}
+@import './transaction-confirmed/index';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 5dda50e52..15ca9deaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -19,14 +19,16 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
const CustomizeGasModal = require('../customize-gas-modal')
const NotifcationModal = require('./notification-modal')
-const ConfirmResetAccount = require('./confirm-reset-account')
-const ConfirmRemoveAccount = require('./confirm-remove-account')
const QRScanner = require('./qr-scanner')
-const TransactionConfirmed = require('./transaction-confirmed')
-const WelcomeBeta = require('./welcome-beta')
-const Notification = require('./notification')
+import ConfirmRemoveAccount from './confirm-remove-account'
+import ConfirmResetAccount from './confirm-reset-account'
+import TransactionConfirmed from './transaction-confirmed'
import ConfirmCustomizeGasModal from './customize-gas'
+import CancelTransaction from './cancel-transaction'
+import WelcomeBeta from './welcome-beta'
+import TransactionDetails from './transaction-details'
+import RejectTransactions from './reject-transactions'
const modalContainerBaseStyle = {
transform: 'translate3d(-50%, 0, 0px)',
@@ -199,11 +201,7 @@ const MODALS = {
},
BETA_UI_NOTIFICATION_MODAL: {
- contents: [
- h(Notification, [
- h(WelcomeBeta),
- ]),
- ],
+ contents: h(WelcomeBeta),
mobileModalStyle: {
...modalContainerMobileStyle,
},
@@ -307,9 +305,7 @@ const MODALS = {
},
CONFIRM_CUSTOMIZE_GAS: {
- contents: [
- h(ConfirmCustomizeGasModal),
- ],
+ contents: h(ConfirmCustomizeGasModal),
mobileModalStyle: {
width: '100vw',
height: '100vh',
@@ -332,11 +328,7 @@ const MODALS = {
TRANSACTION_CONFIRMED: {
disableBackdropClick: true,
- contents: [
- h(Notification, [
- h(TransactionConfirmed),
- ]),
- ],
+ contents: h(TransactionConfirmed),
mobileModalStyle: {
...modalContainerMobileStyle,
},
@@ -347,6 +339,7 @@ const MODALS = {
borderRadius: '8px',
},
},
+
QR_SCANNER: {
contents: h(QRScanner),
mobileModalStyle: {
@@ -360,6 +353,45 @@ const MODALS = {
},
},
+ CANCEL_TRANSACTION: {
+ contents: h(CancelTransaction),
+ mobileModalStyle: {
+ ...modalContainerMobileStyle,
+ },
+ laptopModalStyle: {
+ ...modalContainerLaptopStyle,
+ },
+ contentStyle: {
+ borderRadius: '8px',
+ },
+ },
+
+ TRANSACTION_DETAILS: {
+ contents: h(TransactionDetails),
+ mobileModalStyle: {
+ ...modalContainerMobileStyle,
+ },
+ laptopModalStyle: {
+ ...modalContainerLaptopStyle,
+ },
+ contentStyle: {
+ borderRadius: '8px',
+ },
+ },
+
+ REJECT_TRANSACTIONS: {
+ contents: h(RejectTransactions),
+ mobileModalStyle: {
+ ...modalContainerMobileStyle,
+ },
+ laptopModalStyle: {
+ ...modalContainerLaptopStyle,
+ },
+ contentStyle: {
+ borderRadius: '8px',
+ },
+ },
+
DEFAULT: {
contents: [],
mobileModalStyle: {},
diff --git a/ui/app/components/modals/notification/index.js b/ui/app/components/modals/notification/index.js
deleted file mode 100644
index d60a3129b..000000000
--- a/ui/app/components/modals/notification/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Notification from './notification.container'
-module.exports = Notification
diff --git a/ui/app/components/modals/notification/notification.component.js b/ui/app/components/modals/notification/notification.component.js
deleted file mode 100644
index 1af2f3ca8..000000000
--- a/ui/app/components/modals/notification/notification.component.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../button'
-
-const Notification = (props, context) => {
- return (
- <div className="modal-container">
- { props.children }
- <div className="modal-container__footer">
- <Button
- type="primary"
- onClick={() => props.onHide()}
- >
- { context.t('ok') }
- </Button>
- </div>
- </div>
- )
-}
-
-Notification.propTypes = {
- onHide: PropTypes.func.isRequired,
- children: PropTypes.element,
-}
-
-Notification.contextTypes = {
- t: PropTypes.func,
-}
-
-export default Notification
diff --git a/ui/app/components/modals/notification/notification.container.js b/ui/app/components/modals/notification/notification.container.js
deleted file mode 100644
index 5b98714da..000000000
--- a/ui/app/components/modals/notification/notification.container.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { connect } from 'react-redux'
-import Notification from './notification.component'
-
-const { hideModal } = require('../../../actions')
-
-const mapStateToProps = state => {
- const { appState: { modal: { modalState: { props } } } } = state
- const { onHide } = props
- return {
- onHide,
- }
-}
-
-const mapDispatchToProps = dispatch => {
- return {
- hideModal: () => dispatch(hideModal()),
- }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
- const { onHide, ...otherStateProps } = stateProps
- const { hideModal, ...otherDispatchProps } = dispatchProps
-
- return {
- ...otherStateProps,
- ...otherDispatchProps,
- ...ownProps,
- onHide: () => {
- hideModal()
-
- if (onHide && typeof onHide === 'function') {
- onHide()
- }
- },
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification)
diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/modals/reject-transactions/index.js
new file mode 100644
index 000000000..fcdc372b6
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.js
@@ -0,0 +1 @@
+export { default } from './reject-transactions.container'
diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/modals/reject-transactions/index.scss
new file mode 100644
index 000000000..753466883
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.scss
@@ -0,0 +1,6 @@
+.reject-transactions {
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
new file mode 100644
index 000000000..60b259bdc
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import Modal from '../../modal'
+
+export default class RejectTransactionsModal extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func.isRequired,
+ }
+
+ static propTypes = {
+ onSubmit: PropTypes.func.isRequired,
+ hideModal: PropTypes.func.isRequired,
+ unapprovedTxCount: PropTypes.number.isRequired,
+ }
+
+ onSubmit = async () => {
+ const { onSubmit, hideModal } = this.props
+
+ await onSubmit()
+ hideModal()
+ }
+
+ render () {
+ const { t } = this.context
+ const { hideModal, unapprovedTxCount } = this.props
+
+ return (
+ <Modal
+ headerText={t('rejectTxsN', [unapprovedTxCount])}
+ onClose={hideModal}
+ onSubmit={this.onSubmit}
+ onCancel={hideModal}
+ submitText={t('rejectAll')}
+ cancelText={t('cancel')}
+ submitType="secondary"
+ >
+ <div>
+ <div className="reject-transactions__description">
+ { t('rejectTxsDescription', [unapprovedTxCount]) }
+ </div>
+ </div>
+ </Modal>
+ )
+ }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
new file mode 100644
index 000000000..81e98d3ff
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import RejectTransactionsModal from './reject-transactions.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+const mapStateToProps = (state, ownProps) => {
+ const { unapprovedTxCount } = ownProps
+
+ return {
+ unapprovedTxCount,
+ }
+}
+
+export default compose(
+ withModalProps,
+ connect(mapStateToProps),
+)(RejectTransactionsModal)
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
index cee8da7f8..7776b969e 100644
--- a/ui/app/components/modals/transaction-confirmed/index.js
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -1,2 +1 @@
-import TransactionConfirmed from './transaction-confirmed.component'
-module.exports = TransactionConfirmed
+export { default } from './transaction-confirmed.container'
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
new file mode 100644
index 000000000..c97371fb6
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,22 @@
+.transaction-confirmed {
+ &__title {
+ font-size: 1.5rem;
+ font-weight: 500;
+ padding: 16px 0;
+ text-align: center;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+
+ &__content {
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px;
+ }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
index c1c8a2976..0a98eb1a1 100644
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -1,24 +1,45 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import Modal from '../../modal'
-const TransactionConfirmed = (props, context) => {
- const { t } = context
+export default class TransactionConfirmed extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
- return (
- <div className="modal-container__content">
- <img src="images/check-icon.svg" />
- <div className="modal-container__title">
- { `${t('confirmed')}!` }
- </div>
- <div className="modal-container__description">
- { t('initialTransactionConfirmed') }
- </div>
- </div>
- )
-}
+ static propTypes = {
+ onSubmit: PropTypes.func,
+ hideModal: PropTypes.func,
+ }
-TransactionConfirmed.contextTypes = {
- t: PropTypes.func,
-}
+ handleSubmit = () => {
+ const { hideModal, onSubmit } = this.props
+
+ hideModal()
-export default TransactionConfirmed
+ if (onSubmit && typeof onSubmit === 'function') {
+ onSubmit()
+ }
+ }
+
+ render () {
+ const { t } = this.context
+
+ return (
+ <Modal
+ onSubmit={this.handleSubmit}
+ submitText={t('ok')}
+ >
+ <div className="transaction-confirmed__content">
+ <img src="images/check-icon.svg" />
+ <div className="transaction-confirmed__title">
+ { `${t('confirmed')}!` }
+ </div>
+ <div className="transaction-confirmed__description">
+ { t('initialTransactionConfirmed') }
+ </div>
+ </div>
+ </Modal>
+ )
+ }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..d4e39681a
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,4 @@
+import TransactionConfirmed from './transaction-confirmed.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionConfirmed)
diff --git a/ui/app/components/modals/transaction-details/index.js b/ui/app/components/modals/transaction-details/index.js
new file mode 100644
index 000000000..1fc42c662
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-details.container'
diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js
new file mode 100644
index 000000000..f2fec3409
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import TransactionListItemDetails from '../../transaction-list-item-details'
+import { hexToDecimal } from '../../../helpers/conversions.util'
+
+export default class TransactionConfirmed extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ hideModal: PropTypes.func,
+ transaction: PropTypes.object,
+ onRetry: PropTypes.func,
+ showRetry: PropTypes.bool,
+ onCancel: PropTypes.func,
+ showCancel: PropTypes.bool,
+ }
+
+ handleSubmit = () => {
+ this.props.hideModal()
+ }
+
+ handleRetry = () => {
+ const { onRetry, hideModal } = this.props
+
+ Promise.resolve(onRetry()).then(() => hideModal())
+ }
+
+ render () {
+ const { t } = this.context
+ const { transaction, showRetry, onCancel, showCancel } = this.props
+ const { txParams: { nonce } = {} } = transaction
+ const decimalNonce = nonce && hexToDecimal(nonce)
+
+ return (
+ <Modal
+ onSubmit={this.handleSubmit}
+ onClose={this.handleSubmit}
+ submitText={t('ok')}
+ headerText={t('transactionWithNonce', [`#${decimalNonce}`])}
+ >
+ <TransactionListItemDetails
+ transaction={transaction}
+ onRetry={this.handleRetry}
+ showRetry={showRetry}
+ onCancel={() => onCancel()}
+ showCancel={showCancel}
+ />
+ </Modal>
+ )
+ }
+}
diff --git a/ui/app/components/modals/transaction-details/transaction-details.container.js b/ui/app/components/modals/transaction-details/transaction-details.container.js
new file mode 100644
index 000000000..f212920bb
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.container.js
@@ -0,0 +1,4 @@
+import TransactionDetails from './transaction-details.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionDetails)
diff --git a/ui/app/components/modals/welcome-beta/index.js b/ui/app/components/modals/welcome-beta/index.js
index 515c9cdaf..49e45b9d7 100644
--- a/ui/app/components/modals/welcome-beta/index.js
+++ b/ui/app/components/modals/welcome-beta/index.js
@@ -1,2 +1 @@
-import WelcomeBeta from './welcome-beta.component'
-module.exports = WelcomeBeta
+export { default } from './welcome-beta.container'
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.component.js b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
index 61571723a..ef1799164 100644
--- a/ui/app/components/modals/welcome-beta/welcome-beta.component.js
+++ b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
@@ -1,18 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
+import Modal, { ModalContent } from '../../modal'
const TransactionConfirmed = (props, context) => {
const { t } = context
+ const { hideModal } = props
return (
- <div className="modal-container__content">
- <div className="modal-container__title">
- { `${t('uiWelcome')}` }
- </div>
- <div className="modal-container__description">
- { t('uiWelcomeMessage') }
- </div>
- </div>
+ <Modal
+ onSubmit={() => hideModal()}
+ submitText={t('ok')}
+ >
+ <ModalContent
+ title={t('uiWelcome')}
+ description={t('uiWelcomeMessage')}
+ />
+ </Modal>
)
}
@@ -20,4 +23,8 @@ TransactionConfirmed.contextTypes = {
t: PropTypes.func,
}
+TransactionConfirmed.propTypes = {
+ hideModal: PropTypes.func,
+}
+
export default TransactionConfirmed
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.container.js b/ui/app/components/modals/welcome-beta/welcome-beta.container.js
new file mode 100644
index 000000000..c5123ad47
--- /dev/null
+++ b/ui/app/components/modals/welcome-beta/welcome-beta.container.js
@@ -0,0 +1,4 @@
+import WelcomeBeta from './welcome-beta.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(WelcomeBeta)
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 14cdbacd3..6742e3082 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -43,16 +43,39 @@
&__footer {
display: flex;
- flex-flow: row;
+ flex-flow: column;
justify-content: center;
border-top: 1px solid $geyser;
- padding: 16px;
flex: 0 0 auto;
.btn-default,
.btn-confirm {
font-size: 1rem;
}
+
+ header {
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ padding: 16px;
+ flex: 0 0 auto;
+ }
+
+ footer {
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+ padding: 0 16px 16px;
+ flex: 0 0 auto;
+
+ a, a:hover {
+ text-decoration: none;
+ cursor: pointer;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ color: #2f9ae0;
+ }
+ }
}
&__footer-button {
@@ -182,5 +205,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-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 3d15df294..773fe1f56 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -5,6 +5,7 @@ import Button from '../../button'
export default class PageContainerFooter extends Component {
static propTypes = {
+ children: PropTypes.node,
onCancel: PropTypes.func,
cancelText: PropTypes.string,
onSubmit: PropTypes.func,
@@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component {
render () {
const {
+ children,
onCancel,
cancelText,
onSubmit,
@@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component {
return (
<div className="page-container__footer">
- <Button
- type="default"
- large
- className="page-container__footer-button"
- onClick={e => onCancel(e)}
- >
- { cancelText || this.context.t('cancel') }
- </Button>
-
- <Button
- type={submitButtonType || 'primary'}
- large
- className="page-container__footer-button"
- disabled={disabled}
- onClick={e => onSubmit(e)}
- >
- { submitText || this.context.t('next') }
- </Button>
+ <header>
+ <Button
+ type="default"
+ large
+ className="page-container__footer-button"
+ onClick={e => onCancel(e)}
+ >
+ { cancelText || this.context.t('cancel') }
+ </Button>
+
+ <Button
+ type={submitButtonType || 'primary'}
+ large
+ className="page-container__footer-button"
+ disabled={disabled}
+ onClick={e => onSubmit(e)}
+ >
+ { submitText || this.context.t('next') }
+ </Button>
+ </header>
+
+ {children && (
+ <footer>
+ {children}
+ </footer>
+ )}
</div>
)
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index e69de29bb..64efabab0 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Button from '../../../button'
+import PageFooter from '../page-container-footer.component'
+
+describe('Page Footer', () => {
+ let wrapper
+ const onCancel = sinon.spy()
+ const onSubmit = sinon.spy()
+
+ beforeEach(() => {
+ wrapper = shallow(<PageFooter
+ onCancel = {onCancel}
+ onSubmit = {onSubmit}
+ cancelText = {'Cancel'}
+ submitText = {'Submit'}
+ disabled = {false}
+ submitButtonType = {'Test Type'}
+ />)
+ })
+
+ it('renders page container footer', () => {
+ assert.equal(wrapper.find('.page-container__footer').length, 1)
+ })
+
+ it('should render a footer inside page-container__footer when given children', () => {
+ const wrapper = shallow(
+ <PageFooter>
+ <div>Works</div>
+ </PageFooter>,
+ { context: { t: sinon.spy((k) => `[${k}]`) } }
+ )
+
+ assert.equal(wrapper.find('.page-container__footer footer').length, 1)
+ })
+
+ it('renders two button components', () => {
+ assert.equal(wrapper.find(Button).length, 2)
+ })
+
+ describe('Cancel Button', () => {
+
+ it('has button type of default', () => {
+ assert.equal(wrapper.find('.page-container__footer-button').first().prop('type'), 'default')
+ })
+
+ it('has children text of Cancel', () => {
+ assert.equal(wrapper.find('.page-container__footer-button').first().prop('children'), 'Cancel')
+ })
+
+ it('should call cancel when click is simulated', () => {
+ wrapper.find('.page-container__footer-button').first().prop('onClick')()
+ assert.equal(onCancel.callCount, 1)
+ })
+
+ })
+
+ describe('Submit Button', () => {
+
+ it('assigns button type based on props', () => {
+ assert.equal(wrapper.find('.page-container__footer-button').last().prop('type'), 'Test Type')
+ })
+
+ it('has disabled prop', () => {
+ assert.equal(wrapper.find('.page-container__footer-button').last().prop('disabled'), false)
+ })
+
+ it('has children text when submitText prop exists', () => {
+ assert.equal(wrapper.find('.page-container__footer-button').last().prop('children'), 'Submit')
+ })
+
+ it('should call submit when click is simulated', () => {
+ wrapper.find('.page-container__footer-button').last().prop('onClick')()
+ assert.equal(onSubmit.callCount, 1)
+ })
+ })
+})
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
index e69de29bb..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import PageContainerHeader from '../page-container-header.component'
+
+describe('Page Container Header', () => {
+ let wrapper, style, onBackButtonClick, onClose
+
+ beforeEach(() => {
+ style = {test: 'style'}
+ onBackButtonClick = sinon.spy()
+ onClose = sinon.spy()
+
+ wrapper = shallow(<PageContainerHeader
+ showBackButton = {true}
+ onBackButtonClick = {onBackButtonClick}
+ backButtonStyles = {style}
+ title = {'Test Title'}
+ subtitle = {'Test Subtitle'}
+ tabs = {'Test Tab'}
+ onClose = {onClose}
+ />)
+ })
+
+ describe('Render Header Row', () => {
+
+ it('renders back button', () => {
+ assert.equal(wrapper.find('.page-container__back-button').length, 1)
+ assert.equal(wrapper.find('.page-container__back-button').text(), 'Back')
+ })
+
+ it('ensures style prop', () => {
+ assert.equal(wrapper.find('.page-container__back-button').props().style, style)
+ })
+
+ it('should call back button when click is simulated', () => {
+ wrapper.find('.page-container__back-button').prop('onClick')()
+ assert.equal(onBackButtonClick.callCount, 1)
+ })
+ })
+
+ describe('Render', () => {
+ let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab
+
+ beforeEach(() => {
+ header = wrapper.find('.page-container__header--no-padding-bottom')
+ headerRow = wrapper.find('.page-container__header-row')
+ pageTitle = wrapper.find('.page-container__title')
+ pageSubtitle = wrapper.find('.page-container__subtitle')
+ pageClose = wrapper.find('.page-container__header-close')
+ pageTab = wrapper.find('.page-container__tabs')
+ })
+
+ it('renders page container', () => {
+ assert.equal(header.length, 1)
+ assert.equal(headerRow.length, 1)
+ assert.equal(pageTitle.length, 1)
+ assert.equal(pageSubtitle.length, 1)
+ assert.equal(pageClose.length, 1)
+ assert.equal(pageTab.length, 1)
+ })
+
+ it('renders title', () => {
+ assert.equal(pageTitle.text(), 'Test Title')
+ })
+
+ it('renders subtitle', () => {
+ assert.equal(pageSubtitle.text(), 'Test Subtitle')
+ })
+
+ it('renders tabs', () => {
+ assert.equal(pageTab.text(), 'Test Tab')
+ })
+
+ it('should call close when click is simulated', () => {
+ pageClose.prop('onClick')()
+ assert.equal(onClose.callCount, 1)
+ })
+ })
+
+})
diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
index 1611f817b..20f550927 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@@ -15,7 +15,7 @@ export default class TokenListPlaceholder extends Component {
</div>
<a
className="token-list-placeholder__link"
- href="https://consensys.zendesk.com/hc/en-us/articles/360004135092"
+ href="https://metamask.zendesk.com/hc/en-us/articles/360015489031"
target="_blank"
rel="noopener noreferrer"
>
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
index c24e1e0ea..ee5d6fa64 100644
--- 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
@@ -90,35 +90,31 @@ export default class ConfirmAddSuggestedToken extends Component {
</div>
</div>
<div className="page-container__footer">
- <Button
- type="default"
- large
- className="page-container__footer-button"
- onClick={() => {
- removeSuggestedTokens()
- .then(() => {
- history.push(DEFAULT_ROUTE)
- })
- }}
- >
- { this.context.t('cancel') }
- </Button>
- <Button
- type="primary"
- large
- className="page-container__footer-button"
- onClick={() => {
- addToken(pendingToken)
- .then(() => {
- removeSuggestedTokens()
- .then(() => {
- history.push(DEFAULT_ROUTE)
- })
- })
- }}
- >
- { this.context.t('addToken') }
- </Button>
+ <header>
+ <Button
+ type="default"
+ large
+ className="page-container__footer-button"
+ onClick={() => {
+ removeSuggestedTokens()
+ .then(() => history.push(DEFAULT_ROUTE))
+ }}
+ >
+ { this.context.t('cancel') }
+ </Button>
+ <Button
+ type="primary"
+ large
+ className="page-container__footer-button"
+ onClick={() => {
+ addToken(pendingToken)
+ .then(() => removeSuggestedTokens())
+ .then(() => history.push(DEFAULT_ROUTE))
+ }}
+ >
+ { this.context.t('addToken') }
+ </Button>
+ </header>
</div>
</div>
)
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 3dcc8cda9..d3fec79d7 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
@@ -86,28 +86,30 @@ export default class ConfirmAddToken extends Component {
</div>
</div>
<div className="page-container__footer">
- <Button
- type="default"
- large
- className="page-container__footer-button"
- onClick={() => history.push(ADD_TOKEN_ROUTE)}
- >
- { this.context.t('back') }
- </Button>
- <Button
- type="primary"
- large
- className="page-container__footer-button"
- onClick={() => {
- addTokens(pendingTokens)
- .then(() => {
- clearPendingTokens()
- history.push(DEFAULT_ROUTE)
- })
- }}
- >
- { this.context.t('addTokens') }
- </Button>
+ <header>
+ <Button
+ type="default"
+ large
+ className="page-container__footer-button"
+ onClick={() => history.push(ADD_TOKEN_ROUTE)}
+ >
+ { this.context.t('back') }
+ </Button>
+ <Button
+ type="primary"
+ large
+ className="page-container__footer-button"
+ onClick={() => {
+ addTokens(pendingTokens)
+ .then(() => {
+ clearPendingTokens()
+ history.push(DEFAULT_ROUTE)
+ })
+ }}
+ >
+ { this.context.t('addTokens') }
+ </Button>
+ </header>
</div>
</div>
)
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 56cfbccc8..707dad62d 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
@@ -8,6 +8,7 @@ import {
INSUFFICIENT_FUNDS_ERROR_KEY,
TRANSACTION_ERROR_KEY,
} from '../../../constants/error-keys'
+import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions'
export default class ConfirmTransactionBase extends Component {
static contextTypes = {
@@ -21,6 +22,7 @@ export default class ConfirmTransactionBase extends Component {
// Redux props
balance: PropTypes.string,
cancelTransaction: PropTypes.func,
+ cancelAllTransactions: PropTypes.func,
clearConfirmTransaction: PropTypes.func,
clearSend: PropTypes.func,
conversionRate: PropTypes.number,
@@ -42,12 +44,14 @@ export default class ConfirmTransactionBase extends Component {
sendTransaction: PropTypes.func,
showCustomizeGasModal: PropTypes.func,
showTransactionConfirmedModal: PropTypes.func,
+ showRejectTransactionsConfirmationModal: PropTypes.func,
toAddress: PropTypes.string,
tokenData: PropTypes.object,
tokenProps: PropTypes.object,
toName: PropTypes.string,
transactionStatus: PropTypes.string,
txData: PropTypes.object,
+ unapprovedTxCount: PropTypes.number,
// Component props
action: PropTypes.string,
contentComponent: PropTypes.node,
@@ -85,9 +89,9 @@ export default class ConfirmTransactionBase extends Component {
clearConfirmTransaction,
} = this.props
- if (transactionStatus === 'dropped') {
+ if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
showTransactionConfirmedModal({
- onHide: () => {
+ onSubmit: () => {
clearConfirmTransaction()
history.push(DEFAULT_ROUTE)
},
@@ -248,6 +252,25 @@ export default class ConfirmTransactionBase extends Component {
onEdit({ txData, tokenData, tokenProps })
}
+ handleCancelAll () {
+ const {
+ cancelAllTransactions,
+ clearConfirmTransaction,
+ history,
+ showRejectTransactionsConfirmationModal,
+ unapprovedTxCount,
+ } = this.props
+
+ showRejectTransactionsConfirmationModal({
+ unapprovedTxCount,
+ async onSubmit () {
+ await cancelAllTransactions()
+ clearConfirmTransaction()
+ history.push(DEFAULT_ROUTE)
+ },
+ })
+ }
+
handleCancel () {
const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
@@ -313,6 +336,7 @@ export default class ConfirmTransactionBase extends Component {
nonce,
assetImage,
warning,
+ unapprovedTxCount,
} = this.props
const { submitting, submitError } = this.state
@@ -336,6 +360,7 @@ export default class ConfirmTransactionBase extends Component {
dataComponent={this.renderData()}
contentComponent={contentComponent}
nonce={nonce}
+ unapprovedTxCount={unapprovedTxCount}
assetImage={assetImage}
identiconAddress={identiconAddress}
errorMessage={errorMessage || submitError}
@@ -343,6 +368,7 @@ export default class ConfirmTransactionBase extends Component {
warning={warning}
disabled={!propsValid || !valid || submitting}
onEdit={() => this.handleEdit()}
+ onCancelAll={() => this.handleCancelAll()}
onCancel={() => this.handleCancel()}
onSubmit={() => this.handleSubmit()}
/>
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 8f54c8040..b34067686 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
@@ -8,7 +8,7 @@ import {
clearConfirmTransaction,
updateGasAndCalculate,
} from '../../../ducks/confirm-transaction.duck'
-import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
+import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions'
import {
INSUFFICIENT_FUNDS_ERROR_KEY,
GAS_LIMIT_TOO_LOW_ERROR_KEY,
@@ -17,7 +17,7 @@ import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
import { isBalanceSufficient } from '../../send/send.utils'
import { conversionGreaterThan } from '../../../conversion-util'
import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
-import { addressSlicer } from '../../../util'
+import { addressSlicer, valuesFor } from '../../../util'
const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
return {
@@ -53,6 +53,8 @@ const mapStateToProps = (state, props) => {
selectedAddress,
selectedAddressTxList,
assetImages,
+ network,
+ unapprovedTxs,
} = metamask
const assetImage = assetImages[txParamsToAddress]
const { balance } = accounts[selectedAddress]
@@ -67,6 +69,12 @@ const mapStateToProps = (state, props) => {
const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
const transactionStatus = transaction ? transaction.status : ''
+ const currentNetworkUnapprovedTxs = R.filter(
+ ({ metamaskNetworkId }) => metamaskNetworkId === network,
+ valuesFor(unapprovedTxs),
+ )
+ const unapprovedTxCount = currentNetworkUnapprovedTxs.length
+
return {
balance,
fromAddress,
@@ -90,6 +98,8 @@ const mapStateToProps = (state, props) => {
transactionStatus,
nonce,
assetImage,
+ unapprovedTxs,
+ unapprovedTxCount,
}
}
@@ -97,8 +107,8 @@ const mapDispatchToProps = dispatch => {
return {
clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
clearSend: () => dispatch(clearSend()),
- showTransactionConfirmedModal: ({ onHide }) => {
- return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onHide }))
+ showTransactionConfirmedModal: ({ onSubmit }) => {
+ return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }))
},
showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
return dispatch(showModal({ name: 'CONFIRM_CUSTOMIZE_GAS', txData, onSubmit, validate }))
@@ -106,7 +116,11 @@ const mapDispatchToProps = dispatch => {
updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
},
+ showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
+ return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
+ },
cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
+ cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
}
}
@@ -156,8 +170,9 @@ const getValidateEditGas = ({ balance, conversionRate, txData }) => {
}
const mergeProps = (stateProps, dispatchProps, ownProps) => {
- const { balance, conversionRate, txData } = stateProps
+ const { balance, conversionRate, txData, unapprovedTxs } = stateProps
const {
+ cancelAllTransactions: dispatchCancelAllTransactions,
showCustomizeGasModal: dispatchShowCustomizeGasModal,
updateGasAndCalculate: dispatchUpdateGasAndCalculate,
...otherDispatchProps
@@ -174,6 +189,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
validate: validateEditGas,
}),
+ cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
}
}
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 488a189ea..2767b2e1f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const genAccountLink = require('../../../../../lib/account-link.js')
const Select = require('react-select').default
+import Button from '../../../button'
class AccountList extends Component {
constructor (props, context) {
@@ -143,22 +144,20 @@ class AccountList extends Component {
}
return h('div.new-account-connect-form__buttons', {}, [
- h(
- 'button.btn-default.btn--large.new-account-connect-form__button',
- {
- onClick: this.props.onCancel.bind(this),
- },
- [this.context.t('cancel')]
- ),
-
- h(
- `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
- {
- onClick: this.props.onUnlockAccount.bind(this, this.props.device),
- ...buttonProps,
- },
- [this.context.t('unlock')]
- ),
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'new-account-connect-form__button',
+ onClick: this.props.onCancel.bind(this),
+ }, [this.context.t('cancel')]),
+
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'new-account-connect-form__button unlock',
+ disabled,
+ onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+ }, [this.context.t('unlock')]),
])
}
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index b3dfa4ee2..d3abf3119 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -1,6 +1,7 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
+import Button from '../../../button'
class ConnectScreen extends Component {
constructor (props, context) {
@@ -60,13 +61,13 @@ class ConnectScreen extends Component {
h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
]),
- h(
- 'button.btn-primary.btn--large',
- {
- onClick: () => global.platform.openWindow({
- url: 'https://google.com/chrome',
- }),
- },
+ h(Button, {
+ type: 'primary',
+ large: true,
+ onClick: () => global.platform.openWindow({
+ url: 'https://google.com/chrome',
+ }),
+ },
this.context.t('downloadGoogleChrome')
),
])
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index e2e973af9..48d8f8838 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -46,7 +46,7 @@ AccountImportSubview.prototype.render = function () {
},
onClick: () => {
global.platform.openWindow({
- url: 'https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI',
+ url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
})
},
}, this.context.t('here')),
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index dd57256a3..90279bbbd 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -8,6 +8,7 @@ const actions = require('../../../../actions')
const FileInput = require('react-simple-file-input').default
const { DEFAULT_ROUTE } = require('../../../../routes')
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../button'
class JsonImportSubview extends Component {
constructor (props) {
@@ -51,17 +52,19 @@ class JsonImportSubview extends Component {
h('div.new-account-create-form__buttons', {}, [
- h('button.btn-default.new-account-create-form__button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => this.props.history.push(DEFAULT_ROUTE),
- }, [
- this.context.t('cancel'),
- ]),
+ }, [this.context.t('cancel')]),
- h('button.btn-primary.new-account-create-form__button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => this.createNewKeychain(),
- }, [
- this.context.t('import'),
- ]),
+ }, [this.context.t('import')]),
]),
@@ -82,7 +85,7 @@ class JsonImportSubview extends Component {
}
createNewKeychain () {
- const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress } = this.props
+ const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
const state = this.state
if (!state) {
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 1db999f2f..8db1bfbdd 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -7,6 +7,7 @@ const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const actions = require('../../../../actions')
const { DEFAULT_ROUTE } = require('../../../../routes')
+import Button from '../../../button'
PrivateKeyImportView.contextTypes = {
t: PropTypes.func,
@@ -61,20 +62,22 @@ PrivateKeyImportView.prototype.render = function () {
h('div.new-account-import-form__buttons', {}, [
- h('button.btn-default.btn--large.new-account-create-form__button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => {
displayWarning(null)
this.props.history.push(DEFAULT_ROUTE)
},
- }, [
- this.context.t('cancel'),
- ]),
+ }, [this.context.t('cancel')]),
- h('button.btn-primary.btn--large.new-account-create-form__button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => this.createNewKeychain(),
- }, [
- this.context.t('import'),
- ]),
+ }, [this.context.t('import')]),
]),
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 402b8f03b..94a5fa487 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../../../actions')
const { DEFAULT_ROUTE } = require('../../../routes')
+import Button from '../../button'
class NewAccountCreateForm extends Component {
constructor (props, context) {
@@ -38,20 +39,22 @@ class NewAccountCreateForm extends Component {
h('div.new-account-create-form__buttons', {}, [
- h('button.btn-default.btn--large.new-account-create-form__button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => history.push(DEFAULT_ROUTE),
- }, [
- this.context.t('cancel'),
- ]),
+ }, [this.context.t('cancel')]),
- h('button.btn-primary.btn--large.new-account-create-form__button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'new-account-create-form__button',
onClick: () => {
createAccount(newAccountName || defaultAccountName)
.then(() => history.push(DEFAULT_ROUTE))
},
- }, [
- this.context.t('create'),
- ]),
+ }, [this.context.t('create')]),
]),
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..32557066f 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,13 +108,21 @@ class RevealSeedPage extends Component {
renderPasswordPromptFooter () {
return (
h('.page-container__footer', [
- h('button.btn-default.btn--large.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', {
- onClick: event => this.handleSubmit(event),
- disabled: this.state.password === '',
- }, this.context.t('next')),
+ h('header', [
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'page-container__footer-button',
+ onClick: () => this.props.history.push(DEFAULT_ROUTE),
+ }, this.context.t('cancel')),
+ 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 +130,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 (
+ <div className="settings-page__content-item settings-page__content-item--without-height">
+ <div className="info-tab__link-header">
+ { t('links') }
+ </div>
+ <div className="info-tab__link-item">
+ <a
+ href="https://metamask.io/privacy.html"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('privacyMsg') }
+ </span>
+ </a>
+ </div>
+ <div className="info-tab__link-item">
+ <a
+ href="https://metamask.io/terms.html"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('terms') }
+ </span>
+ </a>
+ </div>
+ <div className="info-tab__link-item">
+ <a
+ href="https://metamask.io/attributions.html"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('attributions') }
+ </span>
+ </a>
+ </div>
+ <hr className="info-tab__separator" />
+ <div className="info-tab__link-item">
+ <a
+ href="https://support.metamask.io"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('supportCenter') }
+ </span>
+ </a>
+ </div>
+ <div className="info-tab__link-item">
+ <a
+ href="https://metamask.io/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('visitWebSite') }
+ </span>
+ </a>
+ </div>
+ <div className="info-tab__link-item">
+ <a
+ href="mailto:help@metamask.io?subject=Feedback"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="info-tab__link-text">
+ { t('emailUs') }
+ </span>
+ </a>
+ </div>
+ </div>
+ )
+ }
+
+ render () {
+ const { t } = this.context
+
+ return (
+ <div className="settings-page__content">
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item settings-page__content-item--without-height">
+ <div className="info-tab__logo-wrapper">
+ <img
+ src="images/info-logo.png"
+ className="info-tab__logo"
+ />
+ </div>
+ <div className="info-tab__item">
+ <div className="info-tab__version-header">
+ { t('metamaskVersion') }
+ </div>
+ <div className="info-tab__version-number">
+ { this.state.version }
+ </div>
+ </div>
+ <div className="info-tab__item">
+ <div className="info-tab__about">
+ { t('builtInCalifornia') }
+ </div>
+ </div>
+ </div>
+ { this.renderInfoLinks() }
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
deleted file mode 100644
index bd9040499..000000000
--- a/ui/app/components/pages/settings/info.js
+++ /dev/null
@@ -1,120 +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'),
- h('div.settings__info-link-item', [
- h('a', {
- href: 'https://support.metamask.io',
- target: '_blank',
- }, [
- h('span.settings__info-link', this.context.t('supportCenter')),
- ]),
- ]),
- h('div.settings__info-link-item', [
- h('a', {
- href: 'https://metamask.io/',
- target: '_blank',
- }, [
- h('span.settings__info-link', this.context.t('visitWebSite')),
- ]),
- ]),
- h('div.settings__info-link-item', [
- h('a', {
- target: '_blank',
- href: 'mailto:help@metamask.io?subject=Feedback',
- }, [
- h('span.settings__info-link', this.context.t('emailUs')),
- ]),
- ]),
- ])
- )
- }
-
- 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', 'MetaMask 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..9da624f56
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -0,0 +1,360 @@
+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,
+ delRpcTarget: 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 (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('currentConversion') }</span>
+ <span className="settings-page__content-description">
+ { t('updatedWithDate', [Date(conversionDate)]) }
+ </span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <SimpleDropdown
+ placeholder={t('selectCurrency')}
+ options={infuraCurrencyOptions}
+ selectedOption={currentCurrency}
+ onSelect={newCurrency => setCurrentCurrency(newCurrency)}
+ />
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderCurrentLocale () {
+ const { t } = this.context
+ const { updateCurrentLocale, currentLocale } = this.props
+ const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+ const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span className="settings-page__content-label">
+ { t('currentLanguage') }
+ </span>
+ <span className="settings-page__content-description">
+ { currentLocaleName }
+ </span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <SimpleDropdown
+ placeholder={t('selectLocale')}
+ options={localeOptions}
+ selectedOption={currentLocale}
+ onSelect={async newLocale => updateCurrentLocale(newLocale)}
+ />
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderNewRpcUrl () {
+ const { t } = this.context
+ const { newRpc } = this.state
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('newRPC') }</span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <TextField
+ type="text"
+ id="new-rpc"
+ placeholder={t('newRPC')}
+ value={newRpc}
+ onChange={e => this.setState({ newRpc: e.target.value })}
+ onKeyPress={e => {
+ if (e.key === 'Enter') {
+ this.validateRpc(newRpc)
+ }
+ }}
+ fullWidth
+ margin="none"
+ />
+ <div
+ className="settings-tab__rpc-save-button"
+ onClick={e => {
+ e.preventDefault()
+ this.validateRpc(newRpc)
+ }}
+ >
+ { t('save') }
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ 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 (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('stateLogs') }</span>
+ <span className="settings-page__content-description">
+ { t('stateLogsDescription') }
+ </span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <Button
+ type="primary"
+ large
+ onClick={() => {
+ window.logStateString((err, result) => {
+ if (err) {
+ displayWarning(t('stateLogError'))
+ } else {
+ exportAsFile('MetaMask State Logs.json', result)
+ }
+ })
+ }}
+ >
+ { t('downloadStateLogs') }
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderSeedWords () {
+ const { t } = this.context
+ const { history } = this.props
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('revealSeedWords') }</span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <Button
+ type="secondary"
+ large
+ onClick={event => {
+ event.preventDefault()
+ history.push(REVEAL_SEED_ROUTE)
+ }}
+ >
+ { t('revealSeedWords') }
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderOldUI () {
+ const { t } = this.context
+ const { setFeatureFlagToBeta } = this.props
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('useOldUI') }</span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <Button
+ type="secondary"
+ large
+ className="settings-tab__button--orange"
+ onClick={event => {
+ event.preventDefault()
+ setFeatureFlagToBeta()
+ }}
+ >
+ { t('useOldUI') }
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderResetAccount () {
+ const { t } = this.context
+ const { showResetAccountConfirmationModal } = this.props
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('resetAccount') }</span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <Button
+ type="secondary"
+ large
+ className="settings-tab__button--orange"
+ onClick={event => {
+ event.preventDefault()
+ showResetAccountConfirmationModal()
+ }}
+ >
+ { t('resetAccount') }
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderBlockieOptIn () {
+ const { useBlockie, setUseBlockie } = this.props
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ this.context.t('blockiesIdenticon') }</span>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <ToggleButton
+ value={useBlockie}
+ onToggle={value => setUseBlockie(!value)}
+ activeLabel=""
+ inactiveLabel=""
+ />
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ renderHexDataOptIn () {
+ const { t } = this.context
+ const { sendHexData, setHexDataFeatureFlag } = this.props
+
+ return (
+ <div className="settings-page__content-row">
+ <div className="settings-page__content-item">
+ <span>{ t('showHexData') }</span>
+ <div className="settings-page__content-description">
+ { t('showHexDataDescription') }
+ </div>
+ </div>
+ <div className="settings-page__content-item">
+ <div className="settings-page__content-item-col">
+ <ToggleButton
+ value={sendHexData}
+ onToggle={value => setHexDataFeatureFlag(!value)}
+ activeLabel=""
+ inactiveLabel=""
+ />
+ </div>
+ </div>
+ </div>
+ )
+ }
+
+ render () {
+ const { warning, isMascara } = this.props
+
+ return (
+ <div className="settings-page__content">
+ { warning && <div className="settings-tab__error">{ warning }</div> }
+ { this.renderCurrentConversion() }
+ { this.renderCurrentLocale() }
+ { this.renderNewRpcUrl() }
+ { this.renderStateLogs() }
+ { this.renderSeedWords() }
+ { !isMascara && this.renderOldUI() }
+ { this.renderResetAccount() }
+ { this.renderBlockieOptIn() }
+ { this.renderHexDataOptIn() }
+ </div>
+ )
+ }
+}
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 (
+ <div className="main-container settings-page">
+ <div className="settings-page__header">
+ <div
+ className="settings-page__close-button"
+ onClick={() => history.push(DEFAULT_ROUTE)}
+ />
+ <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)}
+ />
+ </div>
+ <Switch>
+ <Route
+ exact
+ path={INFO_ROUTE}
+ component={InfoTab}
+ />
+ <Route
+ exact
+ path={SETTINGS_ROUTE}
+ component={SettingsTab}
+ />
+ </Switch>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
deleted file mode 100644
index a5ea1b89c..000000000
--- a/ui/app/components/pages/settings/settings.js
+++ /dev/null
@@ -1,394 +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: '',
- }),
- ]),
- ]),
- ])
- }
-
- renderHexDataOptIn () {
- const { metamask: { featureFlags: { sendHexData } }, setHexDataFeatureFlag } = this.props
-
- return h('div.settings__content-row', [
- h('div.settings__content-item', [
- h('span', this.context.t('showHexData')),
- h(
- 'div.settings__content-description',
- this.context.t('showHexDataDescription')
- ),
- ]),
- h('div.settings__content-item', [
- h('div.settings__content-item-col', [
- h(ToggleButton, {
- value: sendHexData,
- onToggle: (value) => setHexDataFeatureFlag(!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
-
- 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('MetaMask 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(),
- this.renderHexDataOptIn(),
- ])
- )
- }
-}
-
-Settings.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,
- 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'))
- },
- setHexDataFeatureFlag: (featureFlagShowState) => {
- return dispatch(actions.setFeatureFlag('sendHexData', featureFlagShowState))
- },
- 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 3d44bd037..6bd52282d 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;
}
&__mascot-container {
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 3b2c62f49..d3242ddf5 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -26,7 +26,7 @@ function QrCodeView () {
QrCodeView.prototype.render = function () {
const props = this.props
const { message, data } = props.Qr
- const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}`
+ const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data)}`
const qrImage = qrCode(4, 'M')
qrImage.addData(address)
qrImage.make()
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 (
<div className="selected-account">
@@ -34,14 +35,14 @@ class SelectedAccount extends Component {
onClick={() => {
this.setState({ copied: true })
setTimeout(() => this.setState({ copied: false }), 3000)
- copyToClipboard(selectedAddress)
+ copyToClipboard(checksummedAddress)
}}
>
<div className="selected-account__name">
{ selectedIdentity.name }
</div>
<div className="selected-account__address">
- { addressSlicer(selectedAddress) }
+ { addressSlicer(checksummedAddress) }
</div>
</div>
</Tooltip>
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(<SelectedAccount
+ selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
+ selectedIdentity={{ name: 'testName' }}
+ />, { context: { t: () => {}}})
+ // Checksummed version of address is displayed
+ assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D')
+ assert.equal(wrapper.find('.selected-account__name').text(), 'testName')
+ })
+})
diff --git a/ui/app/components/send/currency-display/tests/currency-display.test.js b/ui/app/components/send/currency-display/tests/currency-display.test.js
new file mode 100644
index 000000000..c9560b81c
--- /dev/null
+++ b/ui/app/components/send/currency-display/tests/currency-display.test.js
@@ -0,0 +1,91 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow, mount } from 'enzyme'
+import CurrencyDisplay from '../currency-display'
+
+describe('', () => {
+
+ const token = {
+ address: '0xTest',
+ symbol: 'TST',
+ decimals: '13',
+ }
+
+ it('retuns ETH value for wei value', () => {
+ const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+ const value = wrapper.instance().getValueToRender({
+ // 1000000000000000000
+ value: 'DE0B6B3A7640000',
+ })
+
+ assert.equal(value, 1)
+ })
+
+ it('returns value of token based on token decimals', () => {
+ const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+ const value = wrapper.instance().getValueToRender({
+ selectedToken: token,
+ // 1000000000000000000
+ value: 'DE0B6B3A7640000',
+ })
+
+ assert.equal(value, 100000)
+ })
+
+ it('returns hex value with decimal adjustment', () => {
+
+ const wrapper = mount(
+ <CurrencyDisplay
+ selectedToken={token}
+ />, {context: {t: str => str + '_t'}})
+
+ const value = wrapper.instance().getAmount(1)
+ // 10000000000000
+ assert.equal(value, '9184e72a000')
+ })
+
+ it('#getConvertedValueToRender converts input value based on conversionRate', () => {
+
+ const wrapper = mount(
+ <CurrencyDisplay
+ primaryCurrency={'usd'}
+ convertedCurrency={'ja'}
+ conversionRate={2}
+ />, {context: {t: str => str + '_t'}})
+
+ const value = wrapper.instance().getConvertedValueToRender(32)
+
+ assert.equal(value, 64)
+ })
+
+ it('#onlyRenderConversions renders single element for converted currency and value', () => {
+ const wrapper = mount(
+ <CurrencyDisplay
+ convertedCurrency={'test'}
+ />, {context: {t: str => str + '_t'}})
+
+ const value = wrapper.instance().onlyRenderConversions(10)
+ assert.equal(value.props.className, 'currency-display__converted-value')
+ assert.equal(value.props.children, '10 TEST')
+ })
+
+ it('simulates change value in input', () => {
+ const handleChangeSpy = sinon.spy()
+
+ const wrapper = shallow(
+ <CurrencyDisplay
+ onChange={handleChangeSpy}
+ />, {context: {t: str => str + '_t'}})
+
+ const input = wrapper.find('input')
+ input.simulate('focus')
+ input.simulate('change', { target: { value: '100' } })
+
+ assert.equal(wrapper.state().valueToRender, '100')
+ assert.equal(wrapper.find('input').prop('value'), '100')
+ })
+
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index 4d0d36ab4..ceb620941 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -34,21 +34,27 @@ export default class AmountMaxButton extends Component {
})
}
+ onMaxClick = (event) => {
+ const { setMaxModeTo } = this.props
+
+ event.preventDefault()
+ setMaxModeTo(true)
+ this.setMaxAmount()
+ }
+
render () {
- const { setMaxModeTo, maxModeOn } = this.props
-
- return (
- <div
- className="send-v2__amount-max"
- onClick={(event) => {
- event.preventDefault()
- setMaxModeTo(true)
- this.setMaxAmount()
- }}
- >
- {!maxModeOn ? this.context.t('max') : ''}
- </div>
- )
+ return this.props.maxModeOn
+ ? null
+ : (
+ <div>
+ <span
+ className="send-v2__amount-max"
+ onClick={this.onMaxClick}
+ >
+ {this.context.t('max')}
+ </span>
+ </div>
+ )
}
}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
index 86a05ff21..b04d3897f 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
@@ -56,9 +56,8 @@ describe('AmountMaxButton Component', function () {
})
describe('render', () => {
- it('should render a div with a send-v2__amount-max class', () => {
- assert.equal(wrapper.find('.send-v2__amount-max').length, 1)
- assert(wrapper.find('.send-v2__amount-max').is('div'))
+ it('should render an element with a send-v2__amount-max class', () => {
+ assert(wrapper.exists('.send-v2__amount-max'))
})
it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
@@ -77,9 +76,9 @@ describe('AmountMaxButton Component', function () {
)
})
- it('should not render text when maxModeOn is true', () => {
+ it('should not render anything when maxModeOn is true', () => {
wrapper.setProps({ maxModeOn: true })
- assert.equal(wrapper.find('.send-v2__amount-max').text(), '')
+ assert.ok(!wrapper.exists('.send-v2__amount-max'))
})
it('should render the expected text when maxModeOn is false', () => {
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
index 9e0ce9c23..1b03ffd2b 100644
--- a/ui/app/components/send/send-content/send-content.component.js
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -15,18 +15,24 @@ export default class SendContent extends Component {
showHexData: PropTypes.bool,
};
+ updateGas = (updateData) => this.props.updateGas(updateData)
+
render () {
return (
<PageContainerContent>
<div className="send-v2__form">
<SendFromRow />
<SendToRow
- updateGas={(updateData) => this.props.updateGas(updateData)}
+ updateGas={this.updateGas}
scanQrCode={ _ => this.props.scanQrCode()}
/>
- <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
+ <SendAmountRow updateGas={this.updateGas} />
<SendGasRow />
- { this.props.showHexData ? <SendHexDataRow /> : null }
+ {(this.props.showHexData && (
+ <SendHexDataRow
+ updateGas={this.updateGas}
+ />
+ ))}
</div>
</PageContainerContent>
)
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
index 063930db3..62a74a77b 100644
--- a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -7,6 +7,7 @@ export default class SendHexDataRow extends Component {
data: PropTypes.string,
inError: PropTypes.bool,
updateSendHexData: PropTypes.func.isRequired,
+ updateGas: PropTypes.func.isRequired,
};
static contextTypes = {
@@ -14,9 +15,10 @@ export default class SendHexDataRow extends Component {
};
onInput = (event) => {
- const {updateSendHexData} = this.props
- event.target.value = event.target.value.replace(/\n/g, '')
- updateSendHexData(event.target.value || null)
+ const {updateSendHexData, updateGas} = this.props
+ const data = event.target.value.replace(/\n/g, '') || null
+ updateSendHexData(data)
+ updateGas({ data })
}
render () {
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 434db81e5..17c75c817 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
@@ -8,6 +8,7 @@ export default class SendToRow extends Component {
static propTypes = {
closeToDropdown: PropTypes.func,
+ hasHexData: PropTypes.bool.isRequired,
inError: PropTypes.bool,
network: PropTypes.string,
openToDropdown: PropTypes.func,
@@ -25,8 +26,8 @@ export default class SendToRow extends Component {
};
handleToChange (to, nickname = '', toError) {
- const { updateSendTo, updateSendToError, updateGas } = this.props
- const toErrorObject = getToErrorObject(to, toError)
+ const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props
+ const toErrorObject = getToErrorObject(to, toError, hasHexData)
updateSendTo(to, nickname)
updateSendToError(toErrorObject)
if (toErrorObject.to === null) {
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
index 1c9c9d518..3ee188bad 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
@@ -3,6 +3,7 @@ import {
getCurrentNetwork,
getSendTo,
getSendToAccounts,
+ getSendHexData,
} from '../../send.selectors.js'
import {
getToDropdownOpen,
@@ -22,6 +23,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
function mapStateToProps (state) {
return {
+ hasHexData: Boolean(getSendHexData(state)),
inError: sendToIsInError(state),
network: getCurrentNetwork(state),
to: getSendTo(state),
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
index 6b90a9f09..0eeaa3a11 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
@@ -4,9 +4,11 @@ const {
} = require('../../send.constants')
const { isValidAddress } = require('../../../../util')
-function getToErrorObject (to, toError = null) {
+function getToErrorObject (to, toError = null, hasHexData = false) {
if (!to) {
- toError = REQUIRED_ERROR
+ if (!hasHexData) {
+ toError = REQUIRED_ERROR
+ }
} else if (!isValidAddress(to) && !toError) {
toError = INVALID_RECIPIENT_ADDRESS_ERROR
}
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
index 92355c00a..dfce7652f 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
@@ -24,6 +24,7 @@ proxyquire('../send-to-row.container.js', {
},
'../../send.selectors.js': {
getCurrentNetwork: (s) => `mockNetwork:${s}`,
+ getSendHexData: (s) => s,
getSendTo: (s) => `mockTo:${s}`,
getSendToAccounts: (s) => `mockToAccounts:${s}`,
},
@@ -41,6 +42,7 @@ describe('send-to-row container', () => {
it('should map the correct properties to props', () => {
assert.deepEqual(mapStateToProps('mockState'), {
+ hasHexData: true,
inError: 'mockInError:mockState',
network: 'mockNetwork:mockState',
to: 'mockTo:mockState',
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
index 4d2447c32..c779aeb76 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -29,6 +29,12 @@ describe('send-to-row utils', () => {
})
})
+ it('should return null if to is falsy and hexData is truthy', () => {
+ assert.deepEqual(getToErrorObject(null, undefined, true), {
+ to: null,
+ })
+ })
+
it('should return an invalid recipient error if to is truthy but invalid', () => {
assert.deepEqual(getToErrorObject('mockInvalidTo'), {
to: INVALID_RECIPIENT_ADDRESS_ERROR,
diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
index 518cff06e..230bf450f 100644
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ b/ui/app/components/send/send-footer/send-footer.component.js
@@ -86,9 +86,9 @@ export default class SendFooter extends Component {
}
formShouldBeDisabled () {
- const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props
+ const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
const missingTokenBalance = selectedToken && !tokenBalance
- return inError || !gasTotal || missingTokenBalance || !to
+ return inError || !gasTotal || missingTokenBalance || !(data || to)
}
render () {
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 0dc973632..fb7beca16 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -62,7 +62,7 @@ export default class SendTransactionScreen extends PersistentForm {
}
}
- updateGas ({ to: updatedToAddress, amount: value } = {}) {
+ updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
const {
amount,
blockGasLimit,
@@ -86,6 +86,7 @@ export default class SendTransactionScreen extends PersistentForm {
selectedToken,
to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
value: value || amount,
+ data,
})
}
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 6ee8de9aa..87056499f 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -86,9 +86,10 @@ function mapDispatchToProps (dispatch) {
selectedToken,
to,
value,
+ data,
}) => {
!editingTransactionId
- ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value }))
+ ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
: dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
},
updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
diff --git a/ui/app/components/send/send.utils.js b/ui/app/components/send/send.utils.js
index aa255c3d4..a18a9e4b3 100644
--- a/ui/app/components/send/send.utils.js
+++ b/ui/app/components/send/send.utils.js
@@ -200,16 +200,20 @@ function doesAmountErrorRequireUpdate ({
return amountErrorRequiresUpdate
}
-async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to, value, gasPrice, estimateGasMethod }) {
+async function estimateGas ({
+ selectedAddress,
+ selectedToken,
+ blockGasLimit,
+ to,
+ value,
+ data,
+ gasPrice,
+ estimateGasMethod,
+}) {
const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
- if (selectedToken) {
- paramsForGasEstimate.value = '0x0'
- paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
- }
-
// if recipient has no code, gas is 21k max:
- if (!selectedToken) {
+ if (!selectedToken && !data) {
const code = Boolean(to) && await global.eth.getCode(to)
if (!code || code === '0x') {
return SIMPLE_GAS_COST
@@ -218,7 +222,19 @@ async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to,
return BASE_TOKEN_GAS_COST
}
- paramsForGasEstimate.to = selectedToken ? selectedToken.address : to
+ if (selectedToken) {
+ paramsForGasEstimate.value = '0x0'
+ paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
+ paramsForGasEstimate.to = selectedToken.address
+ } else {
+ if (data) {
+ paramsForGasEstimate.data = data
+ }
+
+ if (to) {
+ paramsForGasEstimate.to = to
+ }
+ }
// if not, fall back to block gasLimit
paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit, 0.95, {
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index d2c2ee926..f4943e707 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -289,6 +289,7 @@ describe('Send Component', function () {
selectedToken: 'mockSelectedToken',
to: '',
value: 'mockAmount',
+ data: undefined,
}
)
})
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
index 85eec6a53..6aa4bf826 100644
--- a/ui/app/components/send/tests/send-container.test.js
+++ b/ui/app/components/send/tests/send-container.test.js
@@ -105,6 +105,7 @@ describe('send container', () => {
selectedToken: { address: '0x1' },
to: 'mockTo',
value: 'mockValue',
+ data: undefined,
}
it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
@@ -117,14 +118,14 @@ describe('send container', () => {
})
it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
- const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value } = mockProps
+ const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
mapDispatchToPropsObject.updateAndSetGasTotal(
Object.assign({}, mockProps, {editingTransactionId: false})
)
assert(dispatchSpy.calledOnce)
assert.deepEqual(
actionSpies.updateGasData.getCall(0).args[0],
- { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value }
+ { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
)
})
})
diff --git a/ui/app/components/send/tests/send-utils.test.js b/ui/app/components/send/tests/send-utils.test.js
index 18dde495a..b72d87eee 100644
--- a/ui/app/components/send/tests/send-utils.test.js
+++ b/ui/app/components/send/tests/send-utils.test.js
@@ -304,10 +304,13 @@ describe('send utils', () => {
selectedAddress: 'mockAddress',
to: '0xisContract',
estimateGasMethod: sinon.stub().callsFake(
- (data, cb) => cb(
- data.to.match(/willFailBecauseOf:/) ? { message: data.to.match(/:(.+)$/)[1] } : null,
- { toString: (n) => `0xabc${n}` }
- )
+ ({to}, cb) => {
+ const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
+ ? new Error(to.match(/:(.+)$/)[1])
+ : null
+ const result = { toString: (n) => `0xabc${n}` }
+ return cb(err, result)
+ }
),
}
const baseExpectedCall = {
@@ -364,6 +367,18 @@ describe('send utils', () => {
assert.equal(result, '0xabc16')
})
+ it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
+ const data = 'mockData'
+ const to = ''
+ const result = await estimateGas({...baseMockParams, data, to})
+ assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+ assert.deepEqual(
+ baseMockParams.estimateGasMethod.getCall(0).args[0],
+ { gasPrice: undefined, value: undefined, data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
+ )
+ assert.equal(result, '0xabc16')
+ })
+
it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
@@ -407,7 +422,7 @@ describe('send utils', () => {
to: 'isContract willFailBecauseOf:some other error',
}))
} catch (err) {
- assert.deepEqual(err, { message: 'some other error' })
+ assert.equal(err.message, 'some other error')
}
})
})
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
index 49ebf49d9..39d15dfa7 100644
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
const AccountListItem = require('../account-list-item/account-list-item.component').default
const connect = require('react-redux').connect
const Tooltip = require('../../tooltip')
+const checksumAddress = require('../../../util').checksumAddress
ToAutoComplete.contextTypes = {
t: PropTypes.func,
@@ -48,7 +49,7 @@ ToAutoComplete.prototype.renderDropdown = function () {
account,
className: 'account-list-item__dropdown',
handleClick: () => {
- onChange(account.address)
+ onChange(checksumAddress(account.address))
closeDropdown()
},
icon: this.getListItemIcon(account.address, to),
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index 656e30ddf..0ab0413be 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -80,13 +80,13 @@
justify-content: center;
position: relative;
flex: 0 0 auto;
- padding: 8px;
.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);
@@ -111,7 +111,6 @@
}
&__arrow-container {
- padding: 0 2px;
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 445a11d8a..e71bd7406 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
@@ -5,6 +5,7 @@ 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'
+import { checksumAddress } from '../../util'
const variantHash = {
[DEFAULT_VARIANT]: 'sender-to-recipient--default',
@@ -40,7 +41,7 @@ export default class SenderToRecipient extends PureComponent {
return !this.props.addressOnly && (
<div className="sender-to-recipient__sender-icon">
<Identicon
- address={this.props.senderAddress}
+ address={checksumAddress(this.props.senderAddress)}
diameter={24}
/>
</div>
@@ -50,6 +51,7 @@ export default class SenderToRecipient extends PureComponent {
renderSenderAddress () {
const { t } = this.context
const { senderName, senderAddress, addressOnly } = this.props
+ const checksummedSenderAddress = checksumAddress(senderAddress)
return (
<Tooltip
@@ -60,7 +62,7 @@ export default class SenderToRecipient extends PureComponent {
onHidden={() => this.setState({ senderAddressCopied: false })}
>
<div className="sender-to-recipient__name">
- { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+ { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
</div>
</Tooltip>
)
@@ -68,11 +70,12 @@ export default class SenderToRecipient extends PureComponent {
renderRecipientIdenticon () {
const { recipientAddress, assetImage } = this.props
+ const checksummedRecipientAddress = checksumAddress(recipientAddress)
return !this.props.addressOnly && (
<div className="sender-to-recipient__sender-icon">
<Identicon
- address={recipientAddress}
+ address={checksummedRecipientAddress}
diameter={24}
image={assetImage}
/>
@@ -83,13 +86,14 @@ export default class SenderToRecipient extends PureComponent {
renderRecipientWithAddress () {
const { t } = this.context
const { recipientName, recipientAddress, addressOnly } = this.props
+ const checksummedRecipientAddress = checksumAddress(recipientAddress)
return (
<div
className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
onClick={() => {
this.setState({ recipientAddressCopied: true })
- copyToClipboard(recipientAddress)
+ copyToClipboard(checksummedRecipientAddress)
}}
>
{ this.renderRecipientIdenticon() }
@@ -103,7 +107,7 @@ export default class SenderToRecipient extends PureComponent {
<div className="sender-to-recipient__name">
{
addressOnly
- ? `${t('to')}: ${recipientAddress}`
+ ? `${t('to')}: ${checksummedRecipientAddress}`
: (recipientName || this.context.t('newContract'))
}
</div>
@@ -115,7 +119,7 @@ export default class SenderToRecipient extends PureComponent {
renderRecipientWithoutAddress () {
return (
<div className="sender-to-recipient__party sender-to-recipient__party--recipient">
- <i className="fa fa-file-text-o" />
+ { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
<div className="sender-to-recipient__name">
{ this.context.t('newContract') }
</div>
@@ -147,6 +151,7 @@ export default class SenderToRecipient extends PureComponent {
render () {
const { senderAddress, recipientAddress, variant } = this.props
+ const checksummedSenderAddress = checksumAddress(senderAddress)
return (
<div className={classnames(variantHash[variant])}>
@@ -154,7 +159,7 @@ export default class SenderToRecipient extends PureComponent {
className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
onClick={() => {
this.setState({ senderAddressCopied: true })
- copyToClipboard(senderAddress)
+ copyToClipboard(checksummedSenderAddress)
}}
>
{ this.renderSenderIdenticon() }
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf..a842bcc8b 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/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a..d76eb5ef8 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -8,6 +8,7 @@ const ethUtil = require('ethereumjs-util')
const classnames = require('classnames')
const { compose } = require('recompose')
const { withRouter } = require('react-router-dom')
+const { ObjectInspector } = require('react-inspector')
const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
@@ -23,6 +24,7 @@ const {
} = require('../selectors.js')
import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
const { DEFAULT_ROUTE } = require('../routes')
@@ -168,12 +170,29 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
}
}
+// eslint-disable-next-line react/display-name
+SignatureRequest.prototype.renderTypedDataV3 = function (data) {
+ const { domain, message } = JSON.parse(data)
+ return [
+ h('div.request-signature__typed-container', [
+ 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' }),
+ ]) : '',
+ ]),
+ ]
+}
+
SignatureRequest.prototype.renderBody = function () {
let rows
let notice = this.context.t('youSign') + ':'
const { txData } = this.props
- const { type, msgParams: { data } } = txData
+ const { type, msgParams: { data, version } } = txData
if (type === 'personal_sign') {
rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
@@ -185,7 +204,7 @@ SignatureRequest.prototype.renderBody = function () {
h('span.request-signature__help-link', {
onClick: () => {
global.platform.openWindow({
- url: 'https://consensys.zendesk.com/hc/en-us/articles/360004427792',
+ url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
})
},
}, this.context.t('learnMore'))]
@@ -204,9 +223,9 @@ SignatureRequest.prototype.renderBody = function () {
}),
}, [notice]),
- h('div.request-signature__rows', [
-
- ...rows.map(({ name, value }) => {
+ h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
+ this.renderTypedDataV3(data) :
+ rows.map(({ name, value }) => {
if (typeof value === 'boolean') {
value = value.toString()
}
@@ -215,9 +234,7 @@ SignatureRequest.prototype.renderBody = function () {
h('div.request-signature__row-value', value),
])
}),
-
- ]),
-
+ ),
])
}
@@ -248,7 +265,10 @@ SignatureRequest.prototype.renderFooter = function () {
}
return h('div.request-signature__footer', [
- h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'request-signature__footer__cancel-button',
onClick: event => {
cancel(event).then(() => {
this.props.clearConfirmTransaction()
@@ -256,7 +276,9 @@ SignatureRequest.prototype.renderFooter = function () {
})
},
}, this.context.t('cancel')),
- h('button.btn-primary.btn--large', {
+ h(Button, {
+ type: 'primary',
+ large: true,
onClick: event => {
sign(event).then(() => {
this.props.clearConfirmTransaction()
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
index 957aec376..4bb09a4b6 100644
--- a/ui/app/components/token-currency-display/token-currency-display.component.js
+++ b/ui/app/components/token-currency-display/token-currency-display.component.js
@@ -2,7 +2,7 @@ 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'
+import { getTokenValue, calcTokenAmount } from '../../token-util'
export default class TokenCurrencyDisplay extends PureComponent {
static propTypes = {
@@ -34,8 +34,8 @@ export default class TokenCurrencyDisplay extends PureComponent {
let displayValue
- if (tokenData.params && tokenData.params.length === 2) {
- const tokenValue = tokenData.params[1].value
+ if (tokenData.params && tokenData.params.length) {
+ const tokenValue = getTokenValue(tokenData.params)
const tokenAmount = calcTokenAmount(tokenValue, decimals)
displayValue = `${tokenAmount} ${symbol}`
}
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
index 05a5efc80..054782203 100644
--- a/ui/app/components/tooltip-v2.js
+++ b/ui/app/components/tooltip-v2.js
@@ -1,33 +1,66 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ReactTippy = require('react-tippy').Tooltip
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import {Tooltip as ReactTippy} from 'react-tippy'
-module.exports = Tooltip
+export default class Tooltip extends PureComponent {
+ static defaultProps = {
+ arrow: true,
+ children: null,
+ containerClassName: '',
+ hideOnClick: false,
+ onHidden: null,
+ position: 'left',
+ size: 'small',
+ title: null,
+ trigger: 'mouseenter',
+ wrapperClassName: '',
+ }
-inherits(Tooltip, Component)
-function Tooltip () {
- Component.call(this)
-}
-
-Tooltip.prototype.render = function () {
- const props = this.props
- const { position, title, children, wrapperClassName, containerClassName, onHidden } = props
+ static propTypes = {
+ arrow: PropTypes.bool,
+ children: PropTypes.node,
+ containerClassName: PropTypes.string,
+ onHidden: PropTypes.func,
+ position: PropTypes.oneOf([
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ ]),
+ size: PropTypes.oneOf([
+ 'small', 'regular', 'big',
+ ]),
+ title: PropTypes.string,
+ trigger: PropTypes.any,
+ wrapperClassName: PropTypes.string,
+ }
- return h('div', {
- className: wrapperClassName,
- }, [
+ render () {
+ const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props
- h(ReactTippy, {
- title,
- position: position || 'left',
- trigger: 'mouseenter',
- hideOnClick: false,
- size: 'small',
- arrow: true,
- className: containerClassName,
- onHidden,
- }, children),
+ if (!title) {
+ return (
+ <div className={wrapperClassName}>
+ {children}
+ </div>
+ )
+ }
- ])
+ return (
+ <div className={wrapperClassName}>
+ <ReactTippy
+ className={containerClassName}
+ title={title}
+ position={position}
+ trigger={trigger}
+ hideOnClick={false}
+ size={size}
+ arrow={arrow}
+ onHidden={onHidden}
+ >
+ {children}
+ </ReactTippy>
+ </div>
+ )
+ }
}
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
index 218792847..b22a9db39 100644
--- a/ui/app/components/transaction-action/tests/transaction-action.component.test.js
+++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
@@ -5,16 +5,19 @@ 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)
- }),
- }
+ const t = key => key
+
describe('Outgoing transaction', () => {
+ beforeEach(() => {
+ global.eth = {
+ getCode: sinon.stub().callsFake(address => {
+ const code = address === 'approveAddress' ? 'contract' : '0x'
+ return Promise.resolve(code)
+ }),
+ }
+ })
+
it('should render -- when methodData is still fetching', () => {
const methodData = { data: {}, done: false, error: null }
const transaction = {
@@ -36,7 +39,7 @@ describe('TransactionAction Component', () => {
methodData={methodData}
transaction={transaction}
className="transaction-action"
- />, { context: { tOrDefault }})
+ />, { context: { t }})
assert.equal(wrapper.find('.transaction-action').length, 1)
assert.equal(wrapper.text(), '--')
@@ -63,14 +66,14 @@ describe('TransactionAction Component', () => {
methodData={methodData}
transaction={transaction}
className="transaction-action"
- />, { context: { tOrDefault }})
+ />, { context: { t }})
assert.equal(wrapper.find('.transaction-action').length, 1)
wrapper.setState({ transactionAction: 'sentEther' })
assert.equal(wrapper.text(), 'sentEther')
})
- it('should render Approved', () => {
+ it('should render Approved', async () => {
const methodData = {
data: {
name: 'Approve',
@@ -98,15 +101,62 @@ describe('TransactionAction Component', () => {
},
}
- const wrapper = shallow(<TransactionAction
- methodData={methodData}
- transaction={transaction}
- className="transaction-action"
- />, { context: { tOrDefault }})
+ const wrapper = shallow(
+ <TransactionAction
+ methodData={methodData}
+ transaction={transaction}
+ className="test-class"
+ />,
+ { context: { t } }
+ )
- assert.equal(wrapper.find('.transaction-action').length, 1)
- wrapper.setState({ transactionAction: 'approve' })
- assert.equal(wrapper.text(), 'approve')
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.test-class').length, 1)
+ await wrapper.instance().getTransactionAction()
+ assert.equal(wrapper.state('transactionAction'), 'approve')
+ })
+
+ it('should render Accept Fulfillment', async () => {
+ const methodData = {
+ data: {
+ name: 'AcceptFulfillment',
+ params: [
+ { type: 'address' },
+ { type: 'uint256' },
+ ],
+ },
+ done: true,
+ error: null,
+ }
+ const transaction = {
+ id: 1,
+ status: 'confirmed',
+ submittedTime: 1534045442919,
+ time: 1534045440641,
+ txParams: {
+ from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0x96',
+ to: 'approveAddress',
+ value: '0x2386f26fc10000',
+ data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003',
+ },
+ }
+
+ const wrapper = shallow(
+ <TransactionAction
+ methodData={methodData}
+ transaction={transaction}
+ className="test-class"
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.test-class').length, 1)
+ await wrapper.instance().getTransactionAction()
+ assert.equal(wrapper.state('transactionAction'), ' Accept Fulfillment')
})
})
})
diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js
index 81a1e96d0..1de91cb71 100644
--- a/ui/app/components/transaction-action/transaction-action.component.js
+++ b/ui/app/components/transaction-action/transaction-action.component.js
@@ -1,10 +1,12 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
import { getTransactionActionKey } from '../../helpers/transactions.util'
+import { camelCaseToCapitalize } from '../../helpers/common.util'
export default class TransactionAction extends PureComponent {
static contextTypes = {
- tOrDefault: PropTypes.func,
+ t: PropTypes.func,
}
static propTypes = {
@@ -29,13 +31,17 @@ export default class TransactionAction extends PureComponent {
const { transactionAction } = this.state
const { transaction, methodData } = this.props
const { data, done } = methodData
+ const { name = '' } = data
if (!done || transactionAction) {
return
}
const actionKey = await getTransactionActionKey(transaction, data)
- const action = actionKey && this.context.tOrDefault(actionKey)
+ const action = actionKey
+ ? this.context.t(actionKey)
+ : camelCaseToCapitalize(name)
+
this.setState({ transactionAction: action })
}
@@ -44,7 +50,7 @@ export default class TransactionAction extends PureComponent {
const { transactionAction } = this.state
return (
- <div className={className}>
+ <div className={classnames('transaction-action', className)}>
{ (done && transactionAction) || '--' }
</div>
)
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..27f3006b3
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -0,0 +1,70 @@
+.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%;
+ }
+
+ &:first-child:last-child::after {
+ display: none;
+ }
+ }
+
+ &__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;
+
+ @media screen and (min-width: $break-large) {
+ 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(
+ <TransactionActivityLog
+ transaction={transaction}
+ className="test-class"
+ />,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-activity-log'))
+ assert.ok(wrapper.hasClass('test-class'))
+ assert.equal(wrapper.find(Card).length, 1)
+ })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
new file mode 100644
index 000000000..85d56a6a2
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
@@ -0,0 +1,27 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../transaction-activity-log.container.js', {
+ 'react-redux': {
+ connect: ms => {
+ mapStateToProps = ms
+ return () => ({})
+ },
+ },
+})
+
+describe('TransactionActivityLog container', () => {
+ describe('mapStateToProps()', () => {
+ it('should return the correct props', () => {
+ const mockState = {
+ metamask: {
+ conversionRate: 280.45,
+ },
+ }
+
+ assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45 })
+ })
+ })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
new file mode 100644
index 000000000..586500408
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -0,0 +1,208 @@
+import assert from 'assert'
+import { getActivities } from '../transaction-activity-log.util'
+
+describe('getActivities', () => {
+ it('should return no activities for an empty history', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ assert.deepEqual(getActivities(transaction), [])
+ })
+
+ it('should return activities for a transaction\'s history', () => {
+ const transaction = {
+ history: [
+ {
+ id: 5559712943815343,
+ loadingDefaults: true,
+ metamaskNetworkId: '3',
+ status: 'unapproved',
+ time: 1535507561452,
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ },
+ [
+ {
+ op: 'replace',
+ path: '/loadingDefaults',
+ timestamp: 1535507561515,
+ value: false,
+ },
+ {
+ op: 'add',
+ path: '/gasPriceSpecified',
+ value: true,
+ },
+ {
+ op: 'add',
+ path: '/gasLimitSpecified',
+ value: true,
+ },
+ {
+ op: 'add',
+ path: '/estimatedGas',
+ value: '0x5208',
+ },
+ ],
+ [
+ {
+ note: '#newUnapprovedTransaction - adding the origin',
+ op: 'add',
+ path: '/origin',
+ timestamp: 1535507561516,
+ value: 'MetaMask',
+ },
+ [],
+ ],
+ [
+ {
+ note: 'confTx: user approved transaction',
+ op: 'replace',
+ path: '/txParams/gasPrice',
+ timestamp: 1535664571504,
+ value: '0x77359400',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to approved',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564302,
+ value: 'approved',
+ },
+ ],
+ [
+ {
+ note: 'transactions#approveTransaction',
+ op: 'add',
+ path: '/txParams/nonce',
+ timestamp: 1535507564439,
+ value: '0xa4',
+ },
+ {
+ op: 'add',
+ path: '/nonceDetails',
+ value: {
+ local: {},
+ network: {},
+ params: {},
+ },
+ },
+ ],
+ [
+ {
+ note: 'transactions#publishTransaction',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564518,
+ value: 'signed',
+ },
+ {
+ op: 'add',
+ path: '/rawTx',
+ value: '0xf86b81a4843b9aca008252089450a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706872386f26fc10000802aa007b30119fc4fc5954fad727895b7e3ba80a78d197e95703cc603bcf017879151a01c50beda40ffaee541da9c05b9616247074f25f392800e0ad6c7a835d5366edf',
+ },
+ ],
+ [],
+ [
+ {
+ note: 'transactions#setTxHash',
+ op: 'add',
+ path: '/hash',
+ timestamp: 1535507564658,
+ value: '0x7acc4987b5c0dfa8d423798a8c561138259de1f98a62e3d52e7e83c0e0dd9fb7',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager - add submitted time stamp',
+ op: 'add',
+ path: '/submittedTime',
+ timestamp: 1535507564660,
+ value: 1535507564660,
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to submitted',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507564665,
+ value: 'submitted',
+ },
+ ],
+ [
+ {
+ note: 'transactions/pending-tx-tracker#event: tx:block-update',
+ op: 'add',
+ path: '/firstRetryBlockNumber',
+ timestamp: 1535507575476,
+ value: '0x3bf624',
+ },
+ ],
+ [
+ {
+ note: 'txStateManager: setting status to confirmed',
+ op: 'replace',
+ path: '/status',
+ timestamp: 1535507615993,
+ value: 'confirmed',
+ },
+ ],
+ ],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const expectedResult = [
+ {
+ 'eventKey': 'transactionCreated',
+ 'timestamp': 1535507561452,
+ 'value': '0x2386f26fc10000',
+ },
+ {
+ 'eventKey': 'transactionUpdatedGas',
+ 'timestamp': 1535664571504,
+ 'value': '0x77359400',
+ },
+ {
+ 'eventKey': 'transactionSubmitted',
+ 'timestamp': 1535507564665,
+ 'value': undefined,
+ },
+ {
+ 'eventKey': 'transactionConfirmed',
+ 'timestamp': 1535507615993,
+ 'value': undefined,
+ },
+ ]
+
+ assert.deepEqual(getActivities(transaction), expectedResult)
+ })
+})
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
new file mode 100644
index 000000000..c4cf57d14
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
+
+export default class TransactionActivityLog extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ transaction: PropTypes.object,
+ className: PropTypes.string,
+ conversionRate: PropTypes.number,
+ }
+
+ state = {
+ activities: [],
+ }
+
+ componentDidMount () {
+ this.setActivites()
+ }
+
+ componentDidUpdate (prevProps) {
+ const { transaction: { history: prevHistory = [] } = {} } = prevProps
+ const { transaction: { history = [] } = {} } = this.props
+
+ if (prevHistory.length !== history.length) {
+ this.setActivites()
+ }
+ }
+
+ setActivites () {
+ const activities = getActivities(this.props.transaction)
+ this.setState({ activities })
+ }
+
+ renderActivity (activity, index) {
+ const { conversionRate } = this.props
+ const { eventKey, value, timestamp } = activity
+ const ethValue = index === 0
+ ? `${getValueFromWeiHex({
+ value,
+ toCurrency: ETH,
+ conversionRate,
+ numberOfDecimals: 6,
+ })} ${ETH}`
+ : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+ const formattedTimestamp = formatDate(timestamp)
+ const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
+
+ return (
+ <div
+ key={index}
+ className="transaction-activity-log__activity"
+ >
+ <div className="transaction-activity-log__activity-icon" />
+ <div
+ className="transaction-activity-log__activity-text"
+ title={activityText}
+ >
+ { activityText }
+ </div>
+ </div>
+ )
+ }
+
+ render () {
+ const { t } = this.context
+ const { className } = this.props
+ const { activities } = this.state
+
+ return (
+ <div className={classnames('transaction-activity-log', className)}>
+ <Card
+ title={t('activityLog')}
+ className="transaction-activity-log__card"
+ >
+ <div className="transaction-activity-log__activities-container">
+ { activities.map((activity, index) => this.renderActivity(activity, index)) }
+ </div>
+ </Card>
+ </div>
+ )
+ }
+}
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..97aa9a8f1
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,86 @@
+// 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))
+ // An entry in the history may be an array of more sub-entries.
+ } else if (Array.isArray(base)) {
+ const events = []
+
+ base.forEach(entry => {
+ const { op, path, value, timestamp: entryTimestamp } = entry
+ // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a
+ // timestamp, the first sub-entry in a history entry should.
+ const timestamp = entryTimestamp || base[0] && base[0].timestamp
+
+ 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(
+ <TransactionBreakdown
+ transaction={transaction}
+ className="test-class"
+ />,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-breakdown'))
+ assert.ok(wrapper.hasClass('test-class'))
+ assert.equal(wrapper.find(Card).length, 1)
+ assert.equal(wrapper.find(Card).find(TransactionBreakdownRow).length, 4)
+ })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
new file mode 100644
index 000000000..557bf75fb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown-row.component'
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
new file mode 100644
index 000000000..8c73be1a6
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
@@ -0,0 +1,19 @@
+.transaction-breakdown-row {
+ font-size: .75rem;
+ color: $scorpion;
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #d8d8d8;
+ }
+
+ &__title {
+ padding-right: 8px;
+ }
+
+ &__value {
+ min-width: 0;
+ }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
new file mode 100644
index 000000000..c19399dbb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdownRow from '../transaction-breakdown-row.component'
+import Button from '../../../button'
+
+describe('TransactionBreakdownRow Component', () => {
+ it('should render text properly', () => {
+ const wrapper = shallow(
+ <TransactionBreakdownRow
+ title="test"
+ className="test-class"
+ >
+ Test
+ </TransactionBreakdownRow>,
+ { 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(
+ <TransactionBreakdownRow
+ title="test"
+ className="test-class"
+ >
+ <Button onClick={() => {}} >Button</Button>
+ </TransactionBreakdownRow>,
+ { 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 (
+ <div className={classnames('transaction-breakdown-row', className)}>
+ <div className="transaction-breakdown-row__title">
+ { title }
+ </div>
+ <div className="transaction-breakdown-row__value">
+ { children }
+ </div>
+ </div>
+ )
+ }
+}
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..5a2b4a481
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,98 @@
+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 } = {}, txReceipt: { gasUsed } = {} } = transaction
+
+ const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
+
+ const hexGasTotal = getHexGasTotal({ gasLimit, gasPrice })
+ const totalInHex = sumHexes(hexGasTotal, value)
+
+ return (
+ <div className={classnames('transaction-breakdown', className)}>
+ <Card
+ title={t('transaction')}
+ className="transaction-breakdown__card"
+ >
+ <TransactionBreakdownRow title={t('amount')}>
+ <CurrencyDisplay
+ className="transaction-breakdown__value"
+ currency={ETH}
+ value={value}
+ />
+ </TransactionBreakdownRow>
+ <TransactionBreakdownRow
+ title={`${t('gasLimit')} (${t('units')})`}
+ className="transaction-breakdown__row-title"
+ >
+ <HexToDecimal
+ className="transaction-breakdown__value"
+ value={gas}
+ />
+ </TransactionBreakdownRow>
+ {
+ typeof gasUsed === 'string' && (
+ <TransactionBreakdownRow
+ title={`${t('gasUsed')} (${t('units')})`}
+ className="transaction-breakdown__row-title"
+ >
+ <HexToDecimal
+ className="transaction-breakdown__value"
+ value={gasUsed}
+ />
+ </TransactionBreakdownRow>
+ )
+ }
+ <TransactionBreakdownRow title={t('gasPrice')}>
+ <CurrencyDisplay
+ className="transaction-breakdown__value"
+ currency={ETH}
+ denomination={GWEI}
+ value={gasPrice}
+ hideLabel
+ />
+ </TransactionBreakdownRow>
+ <TransactionBreakdownRow title={t('total')}>
+ <div>
+ <CurrencyDisplay
+ className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+ currency={ETH}
+ value={totalInHex}
+ numberOfDecimals={6}
+ />
+ <CurrencyDisplay
+ className="transaction-breakdown__value"
+ value={totalInHex}
+ />
+ </div>
+ </TransactionBreakdownRow>
+ </Card>
+ </div>
+ )
+ }
+}
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(
+ <TransactionListItemDetails
+ transaction={transaction}
+ />,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-list-item-details'))
+ assert.equal(wrapper.find(Button).length, 1)
+ assert.equal(wrapper.find(SenderToRecipient).length, 1)
+ assert.equal(wrapper.find(TransactionBreakdown).length, 1)
+ assert.equal(wrapper.find(TransactionActivityLog).length, 1)
+ })
+
+ it('should render a retry button', () => {
+ const transaction = {
+ history: [],
+ id: 1,
+ status: 'confirmed',
+ txParams: {
+ from: '0x1',
+ gas: '0x5208',
+ gasPrice: '0x3b9aca00',
+ nonce: '0xa4',
+ to: '0x2',
+ value: '0x2386f26fc10000',
+ },
+ }
+
+ const wrapper = shallow(
+ <TransactionListItemDetails
+ transaction={transaction}
+ showRetry={true}
+ />,
+ { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+ )
+
+ assert.ok(wrapper.hasClass('transaction-list-item-details'))
+ assert.equal(wrapper.find(Button).length, 2)
+ })
+})
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
new file mode 100644
index 000000000..a4f28fd63
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -0,0 +1,111 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import SenderToRecipient from '../sender-to-recipient'
+import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
+import TransactionActivityLog from '../transaction-activity-log'
+import TransactionBreakdown from '../transaction-breakdown'
+import Button from '../button'
+import Tooltip from '../tooltip'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionListItemDetails extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ onCancel: PropTypes.func,
+ onRetry: PropTypes.func,
+ showCancel: PropTypes.bool,
+ showRetry: PropTypes.bool,
+ transaction: PropTypes.object,
+ }
+
+ handleEtherscanClick = () => {
+ const { hash, metamaskNetworkId } = this.props.transaction
+
+ const prefix = prefixForNetwork(metamaskNetworkId)
+ const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+ global.platform.openWindow({ url: etherscanUrl })
+ this.setState({ showTransactionDetails: true })
+ }
+
+ handleCancel = event => {
+ const { onCancel } = this.props
+
+ event.stopPropagation()
+ onCancel()
+ }
+
+ handleRetry = event => {
+ const { onRetry } = this.props
+
+ event.stopPropagation()
+ onRetry()
+ }
+
+ render () {
+ const { t } = this.context
+ const { transaction, showCancel, showRetry } = this.props
+ const { txParams: { to, from } = {} } = transaction
+
+ return (
+ <div className="transaction-list-item-details">
+ <div className="transaction-list-item-details__header">
+ <div>Details</div>
+ <div className="transaction-list-item-details__header-buttons">
+ {
+ showRetry && (
+ <Button
+ type="raised"
+ onClick={this.handleRetry}
+ className="transaction-list-item-details__header-button"
+ >
+ { t('speedUp') }
+ </Button>
+ )
+ }
+ {
+ showCancel && (
+ <Button
+ type="raised"
+ onClick={this.handleCancel}
+ className="transaction-list-item-details__header-button"
+ >
+ { t('cancel') }
+ </Button>
+ )
+ }
+ <Tooltip title={t('viewOnEtherscan')}>
+ <Button
+ type="raised"
+ onClick={this.handleEtherscanClick}
+ className="transaction-list-item-details__header-button"
+ >
+ <img src="/images/arrow-popout.svg" />
+ </Button>
+ </Tooltip>
+ </div>
+ </div>
+ <div className="transaction-list-item-details__sender-to-recipient-container">
+ <SenderToRecipient
+ variant={CARDS_VARIANT}
+ addressOnly
+ recipientAddress={to}
+ senderAddress={from}
+ />
+ </div>
+ <div className="transaction-list-item-details__cards-container">
+ <TransactionBreakdown
+ transaction={transaction}
+ className="transaction-list-item-details__transaction-breakdown"
+ />
+ <TransactionActivityLog
+ transaction={transaction}
+ className="transaction-list-item-details__transaction-activity-log"
+ />
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 9c53c8960..9d694546b 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -1,37 +1,35 @@
.transaction-list-item {
box-sizing: border-box;
min-height: 74px;
- padding: 8px 20px;
border-bottom: 1px solid $geyser;
- cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-
- @media screen and (max-width: $break-small) {
- padding: 8px 20px 12px;
- }
-
- &:hover {
- background: rgba($alto, .2);
- }
+ background: $white;
&__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) {
- grid-template-columns: 45px 5fr 3fr;
- grid-template-areas:
- "nonce nonce nonce"
- "identicon action primary-amount"
- "identicon 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 {
@@ -114,4 +112,20 @@
font-size: .5rem;
}
}
+
+ &__details-container {
+ padding: 8px 16px 16px;
+ background: #f3f4f7;
+ width: 100%;
+ }
+
+ &__expander {
+ max-height: 0px;
+ width: 100%;
+
+ &--show {
+ max-height: 1000px;
+ transition: max-height 700ms ease-out;
+ }
+ }
}
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
index 4fddd45ef..40eef5e15 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -1,45 +1,77 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
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 prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+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'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../app/scripts/lib/enums'
+import { getStatusKey } from '../../helpers/transactions.util'
export default class TransactionListItem extends PureComponent {
static propTypes = {
+ assetImages: PropTypes.object,
history: PropTypes.object,
- transaction: PropTypes.object,
- value: PropTypes.string,
methodData: PropTypes.object,
- showRetry: PropTypes.bool,
+ nonceAndDate: PropTypes.string,
retryTransaction: PropTypes.func,
setSelectedToken: PropTypes.func,
- nonceAndDate: PropTypes.string,
+ showCancelModal: PropTypes.func,
+ showCancel: PropTypes.bool,
+ showRetry: PropTypes.bool,
+ showTransactionDetailsModal: PropTypes.func,
token: PropTypes.object,
- assetImages: PropTypes.object,
+ tokenData: PropTypes.object,
+ transaction: PropTypes.object,
+ value: PropTypes.string,
+ }
+
+ state = {
+ showTransactionDetails: false,
}
handleClick = () => {
- const { transaction, history } = this.props
- const { id, status, hash, metamaskNetworkId } = transaction
+ const {
+ transaction,
+ history,
+ showTransactionDetailsModal,
+ methodData,
+ showCancel,
+ showRetry,
+ } = this.props
+ const { id, status } = transaction
+ const { showTransactionDetails } = this.state
+ const windowType = window.METAMASK_UI_TYPE
if (status === UNAPPROVED_STATUS) {
history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
- } else if (hash) {
- const prefix = prefixForNetwork(metamaskNetworkId)
- const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
- global.platform.openWindow({ url: etherscanUrl })
+ return
+ }
+
+ if (windowType === ENVIRONMENT_TYPE_FULLSCREEN) {
+ this.setState({ showTransactionDetails: !showTransactionDetails })
+ } else {
+ showTransactionDetailsModal({
+ transaction,
+ onRetry: this.handleRetry,
+ showRetry: showRetry && methodData.done,
+ onCancel: this.handleCancel,
+ showCancel,
+ })
}
}
- handleRetryClick = event => {
- event.stopPropagation()
+ handleCancel = () => {
+ const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props
+ showCancelModal(id, gasPrice)
+ }
+ handleRetry = () => {
const {
transaction: { txParams: { to } = {} },
methodData: { name } = {},
@@ -50,12 +82,12 @@ export default class TransactionListItem extends PureComponent {
setSelectedToken(to)
}
- this.resubmit()
+ return this.resubmit()
}
resubmit () {
const { transaction: { id }, retryTransaction, history } = this.props
- retryTransaction(id)
+ return retryTransaction(id)
.then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
}
@@ -75,6 +107,8 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--primary"
value={value}
prefix="-"
+ numberOfDecimals={2}
+ currency={ETH}
/>
)
}
@@ -89,33 +123,37 @@ export default class TransactionListItem extends PureComponent {
className="transaction-list-item__amount transaction-list-item__amount--secondary"
prefix="-"
value={value}
- numberOfDecimals={2}
- currency={ETH}
/>
)
}
render () {
const {
- transaction,
+ assetImages,
methodData,
- showRetry,
nonceAndDate,
- assetImages,
+ showCancel,
+ showRetry,
+ tokenData,
+ transaction,
} = this.props
const { txParams = {} } = transaction
+ const { showTransactionDetails } = this.state
+ const toAddress = tokenData
+ ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
+ : txParams.to
return (
- <div
- className="transaction-list-item"
- onClick={this.handleClick}
- >
- <div className="transaction-list-item__grid">
+ <div className="transaction-list-item">
+ <div
+ className="transaction-list-item__grid"
+ onClick={this.handleClick}
+ >
<Identicon
className="transaction-list-item__identicon"
- address={txParams.to}
+ address={toAddress}
diameter={34}
- image={assetImages[txParams.to]}
+ image={assetImages[toAddress]}
/>
<TransactionAction
transaction={transaction}
@@ -130,21 +168,33 @@ export default class TransactionListItem extends PureComponent {
</div>
<TransactionStatus
className="transaction-list-item__status"
- statusKey={transaction.status}
+ statusKey={getStatusKey(transaction)}
+ title={(
+ (transaction.err && transaction.err.rpc)
+ ? transaction.err.rpc.message
+ : transaction.err && transaction.err.message
+ )}
/>
{ this.renderPrimaryCurrency() }
{ this.renderSecondaryCurrency() }
</div>
- {
- showRetry && methodData.done && (
- <div
- className="transaction-list-item__retry"
- onClick={this.handleRetryClick}
- >
- <span>Taking too long? Increase the gas price on your transaction</span>
- </div>
- )
- }
+ <div className={classnames('transaction-list-item__expander', {
+ 'transaction-list-item__expander--show': showTransactionDetails,
+ })}>
+ {
+ showTransactionDetails && (
+ <div className="transaction-list-item__details-container">
+ <TransactionListItemDetails
+ transaction={transaction}
+ onRetry={this.handleRetry}
+ showRetry={showRetry && methodData.done}
+ onCancel={this.handleCancel}
+ showCancel={showCancel}
+ />
+ </div>
+ )
+ }
+ </div>
</div>
)
}
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
index 47644241a..72f5f5d61 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -3,18 +3,21 @@ 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 { setSelectedToken, retryTransaction, showModal } 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 } = {}, time } = {} } = 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,
}
}
@@ -22,6 +25,19 @@ const mapDispatchToProps = dispatch => {
return {
setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
+ showCancelModal: (transactionId, originalGasPrice) => {
+ return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+ },
+ showTransactionDetailsModal: ({ transaction, onRetry, showRetry, onCancel, showCancel }) => {
+ return dispatch(showModal({
+ name: 'TRANSACTION_DETAILS',
+ transaction,
+ onRetry,
+ showRetry,
+ onCancel,
+ showCancel,
+ }))
+ },
}
}
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index 0e8db485c..777f701f9 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -3,11 +3,13 @@
flex-direction: column;
flex: 1;
overflow-y: hidden;
+ margin-top: 8px;
+ border-top: 1px solid $geyser;
&__completed-transactions {
display: flex;
flex-direction: column;
- height: 100%;
+ flex: 1;
}
&__header {
@@ -15,7 +17,7 @@
font-size: .875rem;
color: $dusty-gray;
border-bottom: 1px solid $geyser;
- padding: 16px 0 8px 20px;
+ padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) {
padding: 8px 0 8px 16px;
@@ -35,6 +37,7 @@
flex: 1;
display: grid;
grid-template-rows: 35% 1fr;
+ padding-top: 8px;
}
&__empty-text {
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index c864fea3b..eef60186d 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -56,7 +56,7 @@ export default class TransactionList extends PureComponent {
</div>
{
pendingTransactions.map((transaction, index) => (
- this.renderTransaction(transaction, index)
+ this.renderTransaction(transaction, index, true)
))
}
</div>
@@ -78,7 +78,7 @@ export default class TransactionList extends PureComponent {
)
}
- renderTransaction (transaction, index) {
+ renderTransaction (transaction, index, showCancel) {
const { selectedToken, assetImages } = this.props
return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
@@ -92,6 +92,7 @@ export default class TransactionList extends PureComponent {
transaction={transaction}
key={transaction.id}
showRetry={this.shouldShowRetry(transaction)}
+ showCancel={showCancel}
token={selectedToken}
assetImages={assetImages}
/>
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
index 35be550f7..26a1f5d38 100644
--- a/ui/app/components/transaction-status/index.scss
+++ b/ui/app/components/transaction-status/index.scss
@@ -25,4 +25,9 @@
background-color: #FFF2DB;
color: #CA810A;
}
-} \ No newline at end of file
+
+ &--failed {
+ background: lighten($monzo, 56%);
+ color: $monzo;
+ }
+}
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
index a4c827ae8..c22baf18a 100644
--- a/ui/app/components/transaction-status/transaction-status.component.js
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
+import Tooltip from '../tooltip-v2'
import {
UNAPPROVED_STATUS,
REJECTED_STATUS,
@@ -29,6 +30,10 @@ const statusToTextHash = {
}
export default class TransactionStatus extends PureComponent {
+ static defaultProps = {
+ title: null,
+ }
+
static contextTypes = {
t: PropTypes.func,
}
@@ -36,15 +41,18 @@ export default class TransactionStatus extends PureComponent {
static propTypes = {
statusKey: PropTypes.string,
className: PropTypes.string,
+ title: PropTypes.string,
}
render () {
- const { className, statusKey } = this.props
+ const { className, statusKey, title } = this.props
const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
return (
<div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
- { statusText }
+ <Tooltip position="top" title={title}>
+ { statusText }
+ </Tooltip>
</div>
)
}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 6de265110..064a6ab55 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)
@@ -199,7 +201,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/conf-tx.js b/ui/app/conf-tx.js
index 112ea6bca..0784a872e 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -104,7 +104,7 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
if (prevTx && prevTx.status === 'dropped') {
this.props.dispatch(actions.showModal({
name: 'TRANSACTION_CONFIRMED',
- onHide: () => history.push(DEFAULT_ROUTE),
+ onSubmit: () => history.push(DEFAULT_ROUTE),
}))
return
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
index 28731ce33..a20f6cc02 100644
--- a/ui/app/constants/common.js
+++ b/ui/app/constants/common.js
@@ -1 +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
index df6c4c8a4..2dc061091 100644
--- a/ui/app/constants/transactions.js
+++ b/ui/app/constants/transactions.js
@@ -18,5 +18,6 @@ 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 CANCEL_ATTEMPT_ACTION_KEY = 'cancelAttempt'
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/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss
new file mode 100644
index 000000000..2a3007f83
--- /dev/null
+++ b/ui/app/css/itcss/components/account-details-dropdown.scss
@@ -0,0 +1,7 @@
+.account-details-dropdown {
+ width: 60%;
+ position: absolute;
+ top: 120px;
+ right: 15px;
+ z-index: 2000;
+} \ No newline at end of file
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/index.scss b/ui/app/css/itcss/components/index.scss
index 9e2008b54..63aa62eb3 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -36,14 +36,14 @@
@import './gas-slider.scss';
-@import './settings.scss';
-
@import './tab-bar.scss';
@import './simple-dropdown.scss';
@import './request-signature.scss';
+@import './account-details-dropdown.scss';
+
@import './account-dropdown-mini.scss';
@import './editable-label.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/network.scss b/ui/app/css/itcss/components/network.scss
index b23876d01..833a91f12 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -59,6 +59,15 @@
font-weight: 500;
}
+.dropdown-menu-item .fa.delete {
+ margin-right: 10px;
+ display: none;
+}
+
+.dropdown-menu-item:hover .fa.delete {
+ display: inherit;
+}
+
.network-droppo {
right: 2px;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 7eb193d6f..8e963d495 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -22,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;
@@ -219,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..a57653b45 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;
@@ -827,11 +831,17 @@
&__error-message {
display: block;
position: absolute;
- top: 4px;
- right: 4px;
+ top: -18px;
+ right: 0;
font-size: 12px;
line-height: 12px;
color: $red;
+ width: 100%;
+ text-align: center;
+ }
+
+ &__cancel {
+ margin-right: 10px;
}
}
@@ -880,12 +890,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/helpers/common.util.js b/ui/app/helpers/common.util.js
new file mode 100644
index 000000000..0c02481e6
--- /dev/null
+++ b/ui/app/helpers/common.util.js
@@ -0,0 +1,5 @@
+export function camelCaseToCapitalize (str = '') {
+ return str
+ .replace(/([A-Z])/g, ' $1')
+ .replace(/^./, str => str.toUpperCase())
+}
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index d1a4994e4..bcac22500 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -58,6 +58,7 @@ export function getValueFromWeiHex ({
toCurrency,
conversionRate,
numberOfDecimals,
+ toDenomination,
}) {
return conversionUtil(value, {
fromNumericBase: 'hex',
@@ -66,6 +67,7 @@ export function getValueFromWeiHex ({
toCurrency,
numberOfDecimals,
fromDenomination: 'WEI',
+ toDenomination,
conversionRate,
})
}
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
index 1dec216fa..20ef9e35b 100644
--- a/ui/app/helpers/conversions.util.js
+++ b/ui/app/helpers/conversions.util.js
@@ -1,4 +1,10 @@
+import ethUtil from 'ethereumjs-util'
import { conversionUtil } from '../conversion-util'
+import { ETH, GWEI, WEI } from '../constants/common'
+
+export function bnToHex (inputBn) {
+ return ethUtil.addHexPrefix(inputBn.toString(16))
+}
export function hexToDecimal (hexValue) {
return conversionUtil(hexValue, {
@@ -7,31 +13,51 @@ export function hexToDecimal (hexValue) {
})
}
-export function getEthFromWeiHex ({
- value,
- conversionRate,
-}) {
- return getValueFromWeiHex({
- value,
- conversionRate,
- toCurrency: 'ETH',
- numberOfDecimals: 6,
+export function decimalToHex (decimal) {
+ return conversionUtil(decimal, {
+ fromNumericBase: 'dec',
+ toNumericBase: 'hex',
})
}
+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',
+ fromCurrency: ETH,
toCurrency,
numberOfDecimals,
- fromDenomination: 'WEI',
+ fromDenomination: WEI,
+ toDenomination,
conversionRate,
})
}
diff --git a/ui/app/helpers/tests/common.util.test.js b/ui/app/helpers/tests/common.util.test.js
new file mode 100644
index 000000000..a52b91a10
--- /dev/null
+++ b/ui/app/helpers/tests/common.util.test.js
@@ -0,0 +1,27 @@
+import * as utils from '../common.util'
+import assert from 'assert'
+
+describe('Common utils', () => {
+ describe('camelCaseToCapitalize', () => {
+ it('should return a capitalized string from a camel-cased string', () => {
+ const tests = [
+ {
+ test: undefined,
+ expected: '',
+ },
+ {
+ test: '',
+ expected: '',
+ },
+ {
+ test: 'thisIsATest',
+ expected: 'This Is A Test',
+ },
+ ]
+
+ tests.forEach(({ test, expected }) => {
+ assert.equal(utils.camelCaseToCapitalize(test), expected)
+ })
+ })
+ })
+})
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..838522e35
--- /dev/null
+++ b/ui/app/helpers/tests/transactions.util.test.js
@@ -0,0 +1,57 @@
+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())
+ })
+ })
+
+ describe('getStatusKey', () => {
+ it('should return the correct status', () => {
+ const tests = [
+ {
+ transaction: {
+ status: 'confirmed',
+ txReceipt: {
+ status: '0x0',
+ },
+ },
+ expected: 'failed',
+ },
+ {
+ transaction: {
+ status: 'confirmed',
+ txReceipt: {
+ status: '0x1',
+ },
+ },
+ expected: 'confirmed',
+ },
+ {
+ transaction: {
+ status: 'pending',
+ },
+ expected: 'pending',
+ },
+ ]
+
+ tests.forEach(({ transaction, expected }) => {
+ assert.equal(utils.getStatusKey(transaction), expected)
+ })
+ })
+ })
+})
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index 54df54aa8..e50196196 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -14,17 +14,20 @@ import {
TRANSFER_FROM_ACTION_KEY,
SIGNATURE_REQUEST_KEY,
UNKNOWN_FUNCTION_KEY,
+ CANCEL_ATTEMPT_ACTION_KEY,
} from '../constants/transactions'
+import { addCurrencies } from '../conversion-util'
+
abiDecoder.addABI(abi)
-export function getTokenData (data = {}) {
+export function getTokenData (data = '') {
return abiDecoder.decodeMethod(data)
}
const registry = new MethodRegistry({ provider: global.ethereumProvider })
-export async function getMethodData (data = {}) {
+export async function getMethodData (data = '') {
const prefixedData = ethUtil.addHexPrefix(data)
const fourBytePrefix = prefixedData.slice(0, 10)
const sig = await registry.lookup(fourBytePrefix)
@@ -41,8 +44,18 @@ export function isConfirmDeployContract (txData = {}) {
return !txParams.to
}
+/**
+ * Returns the action of a transaction as a key to be passed into the translator.
+ * @param {Object} transaction - txData object
+ * @param {Object} methodData - Data returned from eth-method-registry
+ * @returns {string|undefined}
+ */
export async function getTransactionActionKey (transaction, methodData) {
- const { txParams: { data, to } = {}, msgParams } = transaction
+ const { txParams: { data, to } = {}, msgParams, type } = transaction
+
+ if (type === 'cancel') {
+ return CANCEL_ATTEMPT_ACTION_KEY
+ }
if (msgParams) {
return SIGNATURE_REQUEST_KEY
@@ -74,7 +87,7 @@ export async function getTransactionActionKey (transaction, methodData) {
case TOKEN_METHOD_TRANSFER_FROM:
return TRANSFER_FROM_ACTION_KEY
default:
- return name
+ return undefined
}
} else {
return SEND_ETHER_ACTION_KEY
@@ -103,3 +116,31 @@ 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)
+}
+
+/**
+ * Returns a status key for a transaction. Requires parsing the txMeta.txReceipt on top of
+ * txMeta.status because txMeta.status does not reflect on-chain errors.
+ * @param {Object} transaction - The txMeta object of a transaction.
+ * @param {Object} transaction.txReceipt - The transaction receipt.
+ * @returns {string}
+ */
+export function getStatusKey (transaction) {
+ const { txReceipt: { status } = {} } = transaction
+
+ // There was an on-chain failure
+ if (status === '0x0') {
+ return 'failed'
+ }
+
+ return transaction.status
+}
diff --git a/ui/app/higher-order-components/with-modal-props/index.js b/ui/app/higher-order-components/with-modal-props/index.js
new file mode 100644
index 000000000..e476b51d2
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/index.js
@@ -0,0 +1 @@
+export { default } from './with-modal-props'
diff --git a/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
new file mode 100644
index 000000000..654e7062a
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
@@ -0,0 +1,43 @@
+
+import assert from 'assert'
+import configureMockStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import React from 'react'
+import withModalProps from '../with-modal-props'
+
+const mockState = {
+ appState: {
+ modal: {
+ modalState: {
+ props: {
+ prop1: 'prop1',
+ prop2: 2,
+ prop3: true,
+ },
+ },
+ },
+ },
+}
+
+describe('withModalProps', () => {
+ it('should return a component wrapped with modal state props', () => {
+ const TestComponent = props => (
+ <div className="test">Testing</div>
+ )
+ const WrappedComponent = withModalProps(TestComponent)
+ const store = configureMockStore()(mockState)
+ const wrapper = mount(
+ <WrappedComponent store={store} />
+ )
+
+ assert.ok(wrapper)
+ const testComponent = wrapper.find(TestComponent).at(0)
+ assert.equal(testComponent.length, 1)
+ assert.equal(testComponent.find('.test').text(), 'Testing')
+ const testComponentProps = testComponent.props()
+ assert.equal(testComponentProps.prop1, 'prop1')
+ assert.equal(testComponentProps.prop2, 2)
+ assert.equal(testComponentProps.prop3, true)
+ assert.equal(typeof testComponentProps.hideModal, 'function')
+ })
+})
diff --git a/ui/app/higher-order-components/with-modal-props/with-modal-props.js b/ui/app/higher-order-components/with-modal-props/with-modal-props.js
new file mode 100644
index 000000000..02f3855af
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/with-modal-props.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import { hideModal } from '../../actions'
+
+const mapStateToProps = state => {
+ const { appState } = state
+ const { props: modalProps } = appState.modal.modalState
+
+ return {
+ ...modalProps,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ hideModal: () => dispatch(hideModal()),
+ }
+}
+
+export default function withModalProps (Component) {
+ return connect(mapStateToProps, mapDispatchToProps)(Component)
+}
diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js
index 6e760c429..86b10bac3 100644
--- a/ui/app/selectors/confirm-transaction.js
+++ b/ui/app/selectors/confirm-transaction.js
@@ -126,7 +126,8 @@ const TOKEN_PARAM_VALUE = '_value'
export const tokenAmountAndToAddressSelector = createSelector(
tokenDataParamsSelector,
- params => {
+ tokenDecimalsSelector,
+ (params, tokenDecimals) => {
let toAddress = ''
let tokenAmount = 0
@@ -136,6 +137,10 @@ export const tokenAmountAndToAddressSelector = createSelector(
toAddress = toParam ? toParam.value : params[0].value
const value = valueParam ? Number(valueParam.value) : Number(params[1].value)
tokenAmount = roundExponential(value)
+
+ if (tokenDecimals) {
+ tokenAmount = calcTokenAmount(value, tokenDecimals)
+ }
}
return {
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
index 3e9843722..479002794 100644
--- a/ui/app/selectors/transactions.js
+++ b/ui/app/selectors/transactions.js
@@ -39,7 +39,7 @@ export const transactionsSelector = createSelector(
export const pendingTransactionsSelector = createSelector(
transactionsSelector,
(transactions = []) => (
- transactions.filter(transaction => transaction.status in pendingStatusHash)
+ transactions.filter(transaction => transaction.status in pendingStatusHash).reverse()
)
)
diff --git a/ui/app/token-util.js b/ui/app/token-util.js
index 3d61ad1ca..6e4992763 100644
--- a/ui/app/token-util.js
+++ b/ui/app/token-util.js
@@ -111,3 +111,8 @@ export function calcTokenAmount (value, decimals) {
const multiplier = Math.pow(10, Number(decimals || 0))
return new BigNumber(String(value)).div(multiplier).toNumber()
}
+
+export function getTokenValue (tokenParams = []) {
+ const valueData = tokenParams.find(param => param.name === '_value')
+ return valueData && valueData.value
+}
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
}