Fix batch transaction UX (MetaMask#7473)

* order transactions from oldest to newest in UI * update json-rpc-engine, eth-json-rpc-middleware * update e2e and integration tests
Conflux-Chain · Jan 15, 2020 · 92122af · 92122af
1 parent 48a0ae5
commit 92122af
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -137,7 +137,7 @@
     "human-standard-token-abi": "^2.0.0",
     "jazzicon": "^1.2.0",
     "js-conflux-sdk": "^0.4.0",
-    "json-rpc-engine": "^5.1.5",
+    "json-rpc-engine": "^5.1.6",
     "json-rpc-middleware-stream": "^2.1.1",
     "jsonschema": "^1.2.4",
     "lodash.debounce": "^4.0.8",

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -723,6 +723,7 @@ describe('MetaMask', function () {
         driver,
         By.css('.advanced-gas-inputs__gas-edit-row__input')
       )
+      await gasPriceInput.sendKeys(Key.chord(Key.CONTROL, 'a'))
       await gasPriceInput.sendKeys(Key.BACK_SPACE)
       await gasPriceInput.sendKeys(Key.BACK_SPACE)
       await gasPriceInput.sendKeys('10')
@@ -883,14 +884,14 @@ describe('MetaMask', function () {
       )
       assert.equal(navigateTxButtons.length, 4, 'navigation button present')
 
-      await navigateTxButtons[0].click()
+      await navigateTxButtons[2].click()
       let navigationElement = await findElement(
         driver,
         By.css('.confirm-page-container-navigation')
       )
       let navigationText = await navigationElement.getText()
       assert.equal(
-        navigationText.includes('1'),
+        navigationText.includes('2'),
         true,
         'changed transaction right'
       )
@@ -906,7 +907,7 @@ describe('MetaMask', function () {
       )
       navigationText = await navigationElement.getText()
       assert.equal(
-        navigationText.includes('2'),
+        navigationText.includes('3'),
         true,
         'changed transaction right'
       )
@@ -922,7 +923,7 @@ describe('MetaMask', function () {
       )
       navigationText = await navigationElement.getText()
       assert.equal(
-        navigationText.includes('3'),
+        navigationText.includes('4'),
         true,
         'changed transaction right'
       )
@@ -1028,9 +1029,9 @@ describe('MetaMask', function () {
       )
       navigationText = await navigationElement.getText()
       assert.equal(
-        navigationText.includes('3'),
+        navigationText.includes('2'),
         true,
-        'correct transaction in focus'
+        'correct (same) transaction in focus'
       )
     })
 
@@ -1360,11 +1361,11 @@ describe('MetaMask', function () {
       )
       await delay(regularDelayMs)
       await driver.wait(
-        until.elementTextMatches(balance, /^87.*\s*ETH.*$/),
+        until.elementTextMatches(balance, /^90.*\s*ETH.*$/),
         10000
       )
       const tokenAmount = await balance.getText()
-      assert.ok(/^87.*\s*ETH.*$/.test(tokenAmount))
+      assert.ok(/^90.*\s*ETH.*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })

diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
@@ -46,8 +46,8 @@ async function runConfirmSigRequestsTest (assert) {
     '.transaction-list-item .transaction-list-item__grid'
   )
 
-  if (pendingRequestItem[2]) {
-    pendingRequestItem[2].click()
+  if (pendingRequestItem[0]) {
+    pendingRequestItem[0].click()
   }
 
   await timeout(1000)
@@ -58,14 +58,9 @@ async function runConfirmSigRequestsTest (assert) {
     'Your signature is being requested'
   )
 
-  const confirmSigMessage = await queryAsync($, '.request-signature__notice')
-  assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
-
   let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
-  assert.equal(
-    confirmSigRowValue[0].textContent,
-    '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0'
-  )
+  assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
+  assert.equal(confirmSigRowValue[1].textContent, '1337')
 
   let confirmSigSignButton = await queryAsync(
     $,
@@ -91,9 +86,14 @@ async function runConfirmSigRequestsTest (assert) {
     'Your signature is being requested'
   )
 
+  const confirmSigMessage = await queryAsync($, '.request-signature__notice')
+  assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
+
   confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
-  assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
-  assert.equal(confirmSigRowValue[1].textContent, '1337')
+  assert.equal(
+    confirmSigRowValue[0].textContent,
+    '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0'
+  )
 
   confirmSigSignButton = await queryAsync($, 'button.btn-secondary.btn--large')
   confirmSigSignButton[0].click()

diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js
@@ -33,7 +33,7 @@ const Button = ({
   ...buttonProps
 }) => (
   <button
-    type={submit && 'submit'}
+    type={submit ? 'submit' : undefined}
     className={classnames(
       'button',
       typeHash[type] || CLASSNAME_DEFAULT,

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -601,7 +601,7 @@ export default class ConfirmTransactionBase extends Component {
 
   getNavigateTxData () {
     const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props
-    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs).reverse()
+    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs)
     const currentPosition = enumUnapprovedTxs.indexOf(id ? id.toString() : '')
 
     return {

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
-import R from 'ramda'
 import contractMap from '@yqrashawn/cfx-contract-metadata'
 import ConfirmTransactionBase from './confirm-transaction-base.component'
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck'
@@ -126,10 +125,9 @@ const mapStateToProps = (state, ownProps) => {
     txData.simulationFails = transaction.simulationFails
   }
 
-  const currentNetworkUnapprovedTxs = R.filter(
-    ({ metamaskNetworkId }) => metamaskNetworkId === network,
-    unapprovedTxs
-  )
+  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
+    .filter(key => unapprovedTxs[key].metamaskNetworkId === network)
+    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {})
   const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length
 
   const insufficientBalance = !isBalanceSufficient({

diff --git a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -16,8 +16,7 @@ const mapStateToProps = (state, ownProps) => {
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state)
   const totalUnconfirmed = unconfirmedTransactions.length
   const transaction = totalUnconfirmed
-    ? unapprovedTxs[transactionId] ||
-      unconfirmedTransactions[totalUnconfirmed - 1]
+    ? unapprovedTxs[transactionId] || unconfirmedTransactions[0]
     : {}
 
   return {

diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
@@ -28,7 +28,7 @@ const mapStateToProps = (state, ownProps) => {
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state)
   const totalUnconfirmed = unconfirmedTransactions.length
   const transaction = totalUnconfirmed
-    ? unapprovedTxs[id] || unconfirmedTransactions[totalUnconfirmed - 1]
+    ? unapprovedTxs[id] || unconfirmedTransactions[0]
     : {}
   const { id: transactionId, transactionCategory } = transaction
 

diff --git a/ui/index.js b/ui/index.js
@@ -71,7 +71,7 @@ async function startApp (metamaskState, backgroundConnection, opts) {
   if (numberOfUnapprivedTx > 0) {
     store.dispatch(
       actions.showConfTxPage({
-        id: unapprovedTxsAll[numberOfUnapprivedTx - 1].id,
+        id: unapprovedTxsAll[0].id,
       })
     )
   }

diff --git a/yarn.lock b/yarn.lock
@@ -10866,6 +10866,26 @@ eth-json-rpc-middleware@^4.1.4, eth-json-rpc-middleware@^4.1.5:
     pify "^3.0.0"
     safe-event-emitter "^1.0.1"
 
+eth-json-rpc-middleware@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/eth-json-rpc-middleware/-/eth-json-rpc-middleware-4.4.0.tgz#ef63b783b48dcbea9c1fe25c79e6ea01510e5877"
+  integrity sha512-IeOsil/XiHsybJO9nFf86+1+YIqGQWPPfiTEp3WLkpLZhJm97kw6tFM7GttIZXIcwtaO3zEXgY6PWAH1jkB3ag==
+  dependencies:
+    btoa "^1.2.1"
+    clone "^2.1.1"
+    eth-json-rpc-errors "^1.0.1"
+    eth-query "^2.1.2"
+    eth-sig-util "^1.4.2"
+    ethereumjs-block "^1.6.0"
+    ethereumjs-tx "^1.3.7"
+    ethereumjs-util "^5.1.2"
+    ethereumjs-vm "^2.6.0"
+    fetch-ponyfill "^4.0.0"
+    json-rpc-engine "^5.1.3"
+    json-stable-stringify "^1.0.1"
+    pify "^3.0.0"
+    safe-event-emitter "^1.0.1"
+
 eth-keyring-controller@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/eth-keyring-controller/-/eth-keyring-controller-5.3.0.tgz#8d85a67b894360ab7d601222ca71df8ed5f456c6"
@@ -16786,10 +16806,10 @@ json-rpc-engine@^3.4.0, json-rpc-engine@^3.6.0:
     promise-to-callback "^1.0.0"
     safe-event-emitter "^1.0.1"
 
-json-rpc-engine@^5.1.3, json-rpc-engine@^5.1.5:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-5.1.5.tgz#a5f9915356ea916d5305716354080723c63dede7"
-  integrity sha512-HTT9HixG4j8vHYrmJIckgbISW9Q8tCkySv7x7Q8zjMpcw10wSe/dZSQ0w08VkDm3y195K4074UlvD3hxaznvlw==
+json-rpc-engine@^5.1.3, json-rpc-engine@^5.1.5, json-rpc-engine@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-5.1.6.tgz#3823c1e227657ac5f22a36351db5bb76fa70cf38"
+  integrity sha512-9nDeIIu6o7cvzWRrHNuNi+TiGe+YWOp3ZQkHtpPnQzXuX8Y5ZU2Oot3FDI+DaQyXIqQ6SjtM6rixDOJTjjA8NA==
   dependencies:
     async "^2.0.1"
     eth-json-rpc-errors "^2.0.0"