Update transaction counts beyond page one and cleanup pending transaction behavior

6 years ago · 61ee2b8ef8
parent 50b164629e
commit 61ee2b8ef8
3 changed files with 44 additions and 58 deletions
--- a/apps/block_scout_web/assets/tests/pages/address.js
+++ b/apps/block_scout_web/assets/tests/pages/address.js
@ -6,15 +6,13 @@ describe('PAGE_LOAD', () => {
    const action = {
      type: 'PAGE_LOAD',
      addressHash: '1234',
-      beyondPageOne: false,
-      pendingTransactionHashes: ['0x00']
+      beyondPageOne: false
    }
    const output = reducer(state, action)

    expect(output.addressHash).toBe('1234')
    expect(output.beyondPageOne).toBe(false)
    expect(output.filter).toBe(undefined)
-    expect(output.pendingTransactionHashes).toEqual(['0x00'])
  })
  test('page 2 without filter', () => {
    const state = initialState
@ -96,7 +94,6 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual(['test'])
-    expect(output.pendingTransactionHashes).toEqual(['0x00'])
    expect(output.batchCountAccumulator).toEqual(0)
    expect(output.transactionCount).toEqual(null)
  })
@ -142,17 +139,15 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual([])
-    expect(output.pendingTransactionHashes).toEqual([
+    expect(output.newPendingTransactionHashesBatch).toEqual([
      "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
    ])
-    expect(output.batchPendingCountAccumulator).toEqual(11)
    expect(output.batchCountAccumulator).toEqual(0)
    expect(output.transactionCount).toEqual(null)
  })
  test('single transaction after single transaction', () => {
    const state = Object.assign({}, initialState, {
-      newPendingTransactions: ['test 1'],
-      pendingTransactionHashes: ['0x01']
+      newPendingTransactions: ['test 1']
    })
    const action = {
      type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
@ -164,13 +159,13 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual(['test 1', 'test 2'])
-    expect(output.pendingTransactionHashes).toEqual(['0x01', '0x02'])
-    expect(output.batchPendingCountAccumulator).toEqual(0)
+    expect(output.newPendingTransactionHashesBatch.length).toEqual(0)
  })
  test('single transaction after large batch of transactions', () => {
    const state = Object.assign({}, initialState, {
-      newTransactions: [],
-      batchPendingCountAccumulator: 11
+      newPendingTransactionHashesBatch: [
+        "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
+      ]
    })
    const action = {
      type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
@ -182,13 +177,14 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual([])
-    expect(output.pendingTransactionHashes).toEqual(['0x12'])
-    expect(output.batchPendingCountAccumulator).toEqual(12)
+    expect(output.newPendingTransactionHashesBatch.length).toEqual(12)
+    expect(output.newPendingTransactionHashesBatch).toContain('0x12')
  })
  test('large batch of transactions after large batch of transactions', () => {
    const state = Object.assign({}, initialState, {
-      newPendingTransactions: [],
-      batchPendingCountAccumulator: 11
+      newPendingTransactionHashesBatch: [
+        "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
+      ]
    })
    const action = {
      type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
@ -230,8 +226,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual([])
-    expect(output.pendingTransactionHashes.length).toBe(11)
-    expect(output.batchPendingCountAccumulator).toEqual(22)
+    expect(output.newPendingTransactionHashesBatch.length).toEqual(22)
  })
  test('after disconnection', () => {
    const state = Object.assign({}, initialState, {
@ -247,8 +242,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual([])
-    expect(output.pendingTransactionHashes).toEqual([])
-    expect(output.batchPendingCountAccumulator).toEqual(0)
+    expect(output.newPendingTransactionHashesBatch).toEqual([])
  })
  test('on page 2', () => {
    const state = Object.assign({}, initialState, {
@ -264,7 +258,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newPendingTransactions).toEqual([])
-    expect(output.pendingTransactionHashes).toEqual([])
+    expect(output.newPendingTransactionHashesBatch).toEqual([])
    expect(output.batchCountAccumulator).toEqual(0)
  })
 })
@ -402,7 +396,8 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
  })
  test('on page 2', () => {
    const state = Object.assign({}, initialState, {
-      beyondPageOne: true
+      beyondPageOne: true,
+      transactionCount: 1
    })
    const action = {
      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
@ -414,6 +409,7 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {

    expect(output.newTransactions).toEqual([])
    expect(output.batchCountAccumulator).toEqual(0)
+    expect(output.transactionCount).toEqual(2)
  })
  test('transaction from current address with "from" filter', () => {
    const state = Object.assign({}, initialState, {
@ -480,9 +476,7 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
    expect(output.newTransactions).toEqual([])
  })
  test('single transaction collated from pending', () => {
-    const state = Object.assign({}, initialState, {
-      pendingTransactionHashes: ['0x00']
-    })
+    const state = initialState
    const action = {
      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
      msgs: [{
@ -493,14 +487,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newTransactions).toEqual(['test'])
-    expect(output.pendingTransactionHashes).toEqual([])
    expect(output.batchCountAccumulator).toEqual(0)
    expect(output.transactionCount).toEqual(1)
  })
  test('large batch of transactions', () => {
-    const state = Object.assign({}, initialState, {
-      pendingTransactionHashes: ['0x01', '0x02', '0x12']
-    })
+    const state = initialState
    const action = {
      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
      msgs: [{
@ -541,7 +532,6 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
    const output = reducer(state, action)

    expect(output.newTransactions).toEqual([])
-    expect(output.pendingTransactionHashes).toEqual(['0x12'])
    expect(output.transactionCount).toEqual(11)
  })
 })
--- a/apps/block_scout_web/assets/js/pages/address.js
+++ b/apps/block_scout_web/assets/js/pages/address.js
@ -15,7 +15,6 @@ export const initialState = {
  addressHash: null,
  balance: null,
  batchCountAccumulator: 0,
-  batchPendingCountAccumulator: 0,
  beyondPageOne: null,
  channelDisconnected: false,
  filter: null,
@ -23,7 +22,7 @@ export const initialState = {
  newPendingTransactions: [],
  newTransactions: [],
  newTransactionHashes: [],
-  pendingTransactionHashes: [],
+  newPendingTransactionHashesBatch: [],
  transactionCount: null
 }

@ -34,7 +33,6 @@ export function reducer (state = initialState, action) {
        addressHash: action.addressHash,
        beyondPageOne: action.beyondPageOne,
        filter: action.filter,
-        pendingTransactionHashes: action.pendingTransactionHashes,
        transactionCount: numeral(action.transactionCount).value()
      })
    }
@ -83,29 +81,28 @@ export function reducer (state = initialState, action) {
          (state.filter === 'to' && toAddressHash === state.addressHash) ||
          (state.filter === 'from' && fromAddressHash === state.addressHash)
        ))
-      if (!state.batchPendingCountAccumulator && incomingPendingTransactions.length < BATCH_THRESHOLD) {
+      if (!state.newPendingTransactionHashesBatch.length && incomingPendingTransactions.length < BATCH_THRESHOLD) {
        return Object.assign({}, state, {
          newPendingTransactions: [
            ...state.newPendingTransactions,
            ..._.map(incomingPendingTransactions, 'transactionHtml')
-          ],
-          pendingTransactionHashes: [
-            ...state.pendingTransactionHashes,
-            ..._.map(incomingPendingTransactions, 'transactionHash')
          ]
        })
      } else {
        return Object.assign({}, state, {
-          batchPendingCountAccumulator: state.batchPendingCountAccumulator + incomingPendingTransactions.length,
-          pendingTransactionHashes: [
-            ...state.pendingTransactionHashes,
+          newPendingTransactionHashesBatch: [
+            ...state.newPendingTransactionHashesBatch,
            ..._.map(incomingPendingTransactions, 'transactionHash')
          ]
        })
      }
    }
    case 'RECEIVED_NEW_TRANSACTION_BATCH': {
-      if (state.channelDisconnected || state.beyondPageOne) return state
+      if (state.channelDisconnected) return state
+
+      const transactionCount = state.transactionCount + action.msgs.length
+
+      if (state.beyondPageOne) return Object.assign({}, state, { transactionCount })

      const incomingTransactions = humps.camelizeKeys(action.msgs)
        .filter(({toAddressHash, fromAddressHash}) => (
@ -114,27 +111,25 @@ export function reducer (state = initialState, action) {
          (state.filter === 'from' && fromAddressHash === state.addressHash)
        ))

-      const updatePendingTransactionHashes =
-        _.difference(state.pendingTransactionHashes, _.map(incomingTransactions, 'transactionHash'))
+      const updatedPendingTransactionHashesBatch =
+        _.difference(state.newPendingTransactionHashesBatch, _.map(incomingTransactions, 'transactionHash'))

      if (!state.batchCountAccumulator && incomingTransactions.length < BATCH_THRESHOLD) {
        return Object.assign({}, state, {
-          batchPendingCountAccumulator: state.batchPendingCountAccumulator - incomingTransactions.length,
          newTransactions: [
            ...state.newTransactions,
            ..._.map(incomingTransactions, 'transactionHtml')
          ],
          newTransactionHashes: _.map(incomingTransactions, 'transactionHash'),
-          pendingTransactionHashes: updatePendingTransactionHashes,
-          transactionCount: state.transactionCount + action.msgs.length
+          newPendingTransactionHashesBatch: updatedPendingTransactionHashesBatch,
+          transactionCount: transactionCount
        })
      } else {
        return Object.assign({}, state, {
          batchCountAccumulator: state.batchCountAccumulator + incomingTransactions.length,
-          batchPendingCountAccumulator: state.batchPendingCountAccumulator - incomingTransactions.length,
          newTransactionHashes: _.map(incomingTransactions, 'transactionHash'),
-          pendingTransactionHashes: updatePendingTransactionHashes,
-          transactionCount: state.transactionCount + action.msgs.length
+          newPendingTransactionHashesBatch: updatedPendingTransactionHashesBatch,
+          transactionCount: transactionCount
        })
      }
    }
@ -158,15 +153,11 @@ if ($addressDetailsPage.length) {
      const addressHash = $addressDetailsPage[0].dataset.pageAddressHash
      const addressChannel = socket.channel(`addresses:${addressHash}`, {})
      const { filter, blockNumber } = humps.camelizeKeys(URI(window.location).query(true))
-      const state = store.dispatch({
+      store.dispatch({
        type: 'PAGE_LOAD',
        addressHash,
        beyondPageOne: !!blockNumber,
        filter,
-        pendingTransactionHashes:
-          $('[data-selector="pending-transactions-list"] [data-transaction-hash]').map((index, el) =>
-            el.attributes['data-transaction-hash'].nodeValue
-          ).toArray(),
        transactionCount: $('[data-selector="transaction-count"]').text()
      })
      addressChannel.join()
@ -224,13 +215,13 @@ if ($addressDetailsPage.length) {
      } else {
        $channelBatching.hide()
      }
-      if (state.batchPendingCountAccumulator > 0) {
+      if (oldState.newPendingTransactionHashesBatch !== state.newPendingTransactionHashesBatch && state.newPendingTransactionHashesBatch.length > 0) {
        $channelPendingBatching.show()
-        $channelPendingBatchingCount[0].innerHTML = numeral(state.batchPendingCountAccumulator).format()
+        $channelPendingBatchingCount[0].innerHTML = numeral(state.newPendingTransactionHashesBatch.length).format()
      } else {
        $channelPendingBatching.hide()
      }
-      if (oldState.pendingTransactionHashes !== state.pendingTransactionHashes && state.newTransactionHashes.length > 0) {
+      if (oldState.newTransactionHashes !== state.newTransactionHashes && state.newTransactionHashes.length > 0) {
        let $transaction
        _.each(state.newTransactionHashes, (hash) => {
          $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${hash}"]`)
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
@ -9,6 +9,11 @@
      </div>

      <div class="card-body">
+        <div data-selector="channel-pending-batching-message" class="d-none">
+          <div data-selector="reload-button" class="alert alert-info">
+            <a href="#" class="alert-link"><span data-selector="channel-pending-batching-count"></span> <%= gettext "More pending transactions have come in" %></a>
+          </div>
+        </div>
        <div data-selector="channel-batching-message" class="d-none">
          <div data-selector="reload-button" class="alert alert-info">
            <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>