CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Stop channel batching in most places unless absolutely necessary

Browse Source
pull/949/head
jimmay5469 6 years ago committed by Stamates
parent 531a16d761
commit 6433ddd782
6 changed files with 97 additions and 533 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 362
      apps/block_scout_web/assets/__tests__/pages/address.js
  2. 102
      apps/block_scout_web/assets/__tests__/pages/chain.js
  3. 111
      apps/block_scout_web/assets/js/pages/address.js
  4. 40
      apps/block_scout_web/assets/js/pages/chain.js
  5. 10
      apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
  6. 5
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

362
apps/block_scout_web/assets/__tests__/pages/address.js
Unescape View File

@ -69,7 +69,6 @@ test('CHANNEL_DISCONNECTED', () => {
const output = reducer(state, action) const output = reducer(state, action)
expect(output.channelDisconnected).toBe(true) expect(output.channelDisconnected).toBe(true)
expect(output.batchCountAccumulator).toBe(0)
}) })
test('RECEIVED_UPDATED_BALANCE', () => { test('RECEIVED_UPDATED_BALANCE', () => {
@ -85,68 +84,19 @@ test('RECEIVED_UPDATED_BALANCE', () => {
expect(output.balance).toBe('hello world') expect(output.balance).toBe('hello world')
}) })
describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { describe('RECEIVED_NEW_PENDING_TRANSACTION', () => {
test('single transaction', () => { test('single transaction', () => {
const state = initialState const state = initialState
const action = { const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', type: 'RECEIVED_NEW_PENDING_TRANSACTION',
msgs: [{ msg: {
transactionHash: '0x00', transactionHash: '0x00',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual(['test']) expect(output.newPendingTransactions).toEqual(['test'])
expect(output.batchCountAccumulator).toEqual(0)
expect(output.transactionCount).toEqual(null)
})
test('large batch of transactions', () => {
const state = initialState
const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
msgs: [{
transactionHash: '0x01',
transactionHtml: 'test 1'
},{
transactionHash: '0x02',
transactionHtml: 'test 2'
},{
transactionHash: '0x03',
transactionHtml: 'test 3'
},{
transactionHash: '0x04',
transactionHtml: 'test 4'
},{
transactionHash: '0x05',
transactionHtml: 'test 5'
},{
transactionHash: '0x06',
transactionHtml: 'test 6'
},{
transactionHash: '0x07',
transactionHtml: 'test 7'
},{
transactionHash: '0x08',
transactionHtml: 'test 8'
},{
transactionHash: '0x09',
transactionHtml: 'test 9'
},{
transactionHash: '0x10',
transactionHtml: 'test 10'
},{
transactionHash: '0x11',
transactionHtml: 'test 11'
}]
}
const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual([])
expect(output.pendingTransactionHashes).toEqual([
"0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
])
expect(output.batchCountAccumulator).toEqual(0)
expect(output.transactionCount).toEqual(null) expect(output.transactionCount).toEqual(null)
}) })
test('single transaction after single transaction', () => { test('single transaction after single transaction', () => {
@ -154,94 +104,27 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
newPendingTransactions: ['test 1'] newPendingTransactions: ['test 1']
}) })
const action = { const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', type: 'RECEIVED_NEW_PENDING_TRANSACTION',
msgs: [{ msg: {
transactionHash: '0x02', transactionHash: '0x02',
transactionHtml: 'test 2' transactionHtml: 'test 2'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual(['test 1', 'test 2']) expect(output.newPendingTransactions).toEqual(['test 1', 'test 2'])
expect(output.pendingTransactionHashes.length).toEqual(0) expect(output.pendingTransactionHashes.length).toEqual(0)
}) })
test('single transaction after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
pendingTransactionHashes: [
"0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
]
})
const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
msgs: [{
transactionHash: '0x12',
transactionHtml: 'test 12'
}]
}
const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual([])
expect(output.pendingTransactionHashes.length).toEqual(12)
expect(output.pendingTransactionHashes).toContain('0x12')
})
test('large batch of transactions after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
pendingTransactionHashes: [
"0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11"
]
})
const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH',
msgs: [{
transactionHash: '0x12',
transactionHtml: 'test 12'
},{
transactionHash: '0x13',
transactionHtml: 'test 13'
},{
transactionHash: '0x14',
transactionHtml: 'test 14'
},{
transactionHash: '0x15',
transactionHtml: 'test 15'
},{
transactionHash: '0x16',
transactionHtml: 'test 16'
},{
transactionHash: '0x17',
transactionHtml: 'test 17'
},{
transactionHash: '0x18',
transactionHtml: 'test 18'
},{
transactionHash: '0x19',
transactionHtml: 'test 19'
},{
transactionHash: '0x20',
transactionHtml: 'test 20'
},{
transactionHash: '0x21',
transactionHtml: 'test 21'
},{
transactionHash: '0x22',
transactionHtml: 'test 22'
}]
}
const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual([])
expect(output.pendingTransactionHashes.length).toEqual(22)
})
test('after disconnection', () => { test('after disconnection', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
channelDisconnected: true channelDisconnected: true
}) })
const action = { const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', type: 'RECEIVED_NEW_PENDING_TRANSACTION',
msgs: [{ msg: {
transactionHash: '0x00', transactionHash: '0x00',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
@ -253,174 +136,62 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => {
beyondPageOne: true beyondPageOne: true
}) })
const action = { const action = {
type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', type: 'RECEIVED_NEW_PENDING_TRANSACTION',
msgs: [{ msg: {
transactionHash: '0x00', transactionHash: '0x00',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newPendingTransactions).toEqual([]) expect(output.newPendingTransactions).toEqual([])
expect(output.pendingTransactionHashes).toEqual([]) expect(output.pendingTransactionHashes).toEqual([])
expect(output.batchCountAccumulator).toEqual(0)
}) })
}) })
describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { describe('RECEIVED_NEW_TRANSACTION', () => {
test('single transaction', () => { test('single transaction', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
addressHash: '0x111' addressHash: '0x111'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test', transactionHtml: 'test'
fromAddressHash: '0x111' }
}]
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual(['test']) expect(output.newTransactions).toEqual(['test'])
expect(output.batchCountAccumulator).toEqual(0)
expect(output.transactionCount).toEqual(1) expect(output.transactionCount).toEqual(1)
}) })
test('large batch of transactions', () => {
const state = initialState
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 1'
},{
transactionHtml: 'test 2'
},{
transactionHtml: 'test 3'
},{
transactionHtml: 'test 4'
},{
transactionHtml: 'test 5'
},{
transactionHtml: 'test 6'
},{
transactionHtml: 'test 7'
},{
transactionHtml: 'test 8'
},{
transactionHtml: 'test 9'
},{
transactionHtml: 'test 10'
},{
transactionHtml: 'test 11'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(11)
})
test('single transaction after single transaction', () => { test('single transaction after single transaction', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
newTransactions: ['test 1'] newTransactions: ['test 1']
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test 2' transactionHtml: 'test 2'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual(['test 1', 'test 2']) expect(output.newTransactions).toEqual(['test 1', 'test 2'])
expect(output.batchCountAccumulator).toEqual(0)
})
test('single transaction after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
newTransactions: [],
batchCountAccumulator: 11
})
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 12'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(12)
})
test('large batch of transactions after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
newTransactions: [],
batchCountAccumulator: 11
})
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 12'
},{
transactionHtml: 'test 13'
},{
transactionHtml: 'test 14'
},{
transactionHtml: 'test 15'
},{
transactionHtml: 'test 16'
},{
transactionHtml: 'test 17'
},{
transactionHtml: 'test 18'
},{
transactionHtml: 'test 19'
},{
transactionHtml: 'test 20'
},{
transactionHtml: 'test 21'
},{
transactionHtml: 'test 22'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(22)
})
test('increments the transactions count only when the address sent transactions', () => {
const state = Object.assign({}, initialState, {
newTransactions: [],
addressHash: '0x111',
transactionCount: 1
})
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 12',
fromAddressHash: '0x111',
toAddressHash: '0x222'
},{
transactionHtml: 'test 13',
fromAddressHash: '0x222',
toAddressHash: '0x111'
}]
}
const output = reducer(state, action)
expect(output.transactionCount).toEqual(2)
}) })
test('after disconnection', () => { test('after disconnection', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
channelDisconnected: true channelDisconnected: true
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual([]) expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(0)
}) })
test('on page 2', () => { test('on page 2', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
@ -429,16 +200,14 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
addressHash: '0x111' addressHash: '0x111'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test', transactionHtml: 'test'
fromAddressHash: '0x111' }
}]
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual([]) expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(0)
expect(output.transactionCount).toEqual(2) expect(output.transactionCount).toEqual(2)
}) })
test('transaction from current address with "from" filter', () => { test('transaction from current address with "from" filter', () => {
@ -447,11 +216,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
filter: 'from' filter: 'from'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
fromAddressHash: '1234', fromAddressHash: '1234',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
@ -463,11 +232,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
filter: 'to' filter: 'to'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
fromAddressHash: '1234', fromAddressHash: '1234',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
@ -479,11 +248,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
filter: 'to' filter: 'to'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
toAddressHash: '1234', toAddressHash: '1234',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
@ -495,11 +264,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
filter: 'from' filter: 'from'
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
toAddressHash: '1234', toAddressHash: '1234',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
@ -508,58 +277,15 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
test('single transaction collated from pending', () => { test('single transaction collated from pending', () => {
const state = initialState const state = initialState
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHash: '0x00', transactionHash: '0x00',
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual(['test']) expect(output.newTransactions).toEqual(['test'])
expect(output.batchCountAccumulator).toEqual(0) expect(output.transactionCount).toEqual(1)
})
test('large batch of transactions', () => {
const state = initialState
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHash: '0x01',
transactionHtml: 'test 1'
},{
transactionHash: '0x02',
transactionHtml: 'test 2'
},{
transactionHash: '0x03',
transactionHtml: 'test 3'
},{
transactionHash: '0x04',
transactionHtml: 'test 4'
},{
transactionHash: '0x05',
transactionHtml: 'test 5'
},{
transactionHash: '0x06',
transactionHtml: 'test 6'
},{
transactionHash: '0x07',
transactionHtml: 'test 7'
},{
transactionHash: '0x08',
transactionHtml: 'test 8'
},{
transactionHash: '0x09',
transactionHtml: 'test 9'
},{
transactionHash: '0x10',
transactionHtml: 'test 10'
},{
transactionHash: '0x11',
transactionHtml: 'test 11'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
}) })
}) })

102
apps/block_scout_web/assets/__tests__/pages/chain.js
Unescape View File

@ -195,120 +195,32 @@ test('RECEIVED_NEW_EXCHANGE_RATE', () => {
expect(output.usdMarketCap).toEqual(1230000) expect(output.usdMarketCap).toEqual(1230000)
}) })
describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { describe('RECEIVED_NEW_TRANSACTION', () => {
test('single transaction', () => { test('single transaction', () => {
const state = initialState const state = initialState
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test' transactionHtml: 'test'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual(['test']) expect(output.newTransactions).toEqual(['test'])
expect(output.batchCountAccumulator).toEqual(0)
expect(output.transactionCount).toEqual(1) expect(output.transactionCount).toEqual(1)
}) })
test('large batch of transactions', () => {
const state = initialState
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 1'
},{
transactionHtml: 'test 2'
},{
transactionHtml: 'test 3'
},{
transactionHtml: 'test 4'
},{
transactionHtml: 'test 5'
},{
transactionHtml: 'test 6'
},{
transactionHtml: 'test 7'
},{
transactionHtml: 'test 8'
},{
transactionHtml: 'test 9'
},{
transactionHtml: 'test 10'
},{
transactionHtml: 'test 11'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(11)
expect(output.transactionCount).toEqual(11)
})
test('single transaction after single transaction', () => { test('single transaction after single transaction', () => {
const state = Object.assign({}, initialState, { const state = Object.assign({}, initialState, {
newTransactions: ['test 1'] newTransactions: ['test 1']
}) })
const action = { const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH', type: 'RECEIVED_NEW_TRANSACTION',
msgs: [{ msg: {
transactionHtml: 'test 2' transactionHtml: 'test 2'
}] }
} }
const output = reducer(state, action) const output = reducer(state, action)
expect(output.newTransactions).toEqual(['test 1', 'test 2']) expect(output.newTransactions).toEqual(['test 1', 'test 2'])
expect(output.batchCountAccumulator).toEqual(0)
})
test('single transaction after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
newTransactions: [],
batchCountAccumulator: 11
})
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 12'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(12)
})
test('large batch of transactions after large batch of transactions', () => {
const state = Object.assign({}, initialState, {
newTransactions: [],
batchCountAccumulator: 11
})
const action = {
type: 'RECEIVED_NEW_TRANSACTION_BATCH',
msgs: [{
transactionHtml: 'test 12'
},{
transactionHtml: 'test 13'
},{
transactionHtml: 'test 14'
},{
transactionHtml: 'test 15'
},{
transactionHtml: 'test 16'
},{
transactionHtml: 'test 17'
},{
transactionHtml: 'test 18'
},{
transactionHtml: 'test 19'
},{
transactionHtml: 'test 20'
},{
transactionHtml: 'test 21'
},{
transactionHtml: 'test 22'
}]
}
const output = reducer(state, action)
expect(output.newTransactions).toEqual([])
expect(output.batchCountAccumulator).toEqual(22)
}) })
}) })

111
apps/block_scout_web/assets/js/pages/address.js
Unescape View File

@ -34,7 +34,7 @@ export const initialState = {
newInternalTransactions: [], newInternalTransactions: [],
newPendingTransactions: [], newPendingTransactions: [],
newTransactions: [], newTransactions: [],
newTransactionHashes: [], newTransactionHash: null,
pendingTransactionHashes: [], pendingTransactionHashes: [],
transactionCount: null, transactionCount: null,
validationCount: null validationCount: null
@ -94,66 +94,44 @@ export function reducer (state = initialState, action) {
}) })
} }
} }
case 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH': { case 'RECEIVED_NEW_PENDING_TRANSACTION': {
if (state.channelDisconnected || state.beyondPageOne) return state if (state.channelDisconnected || state.beyondPageOne) return state
const incomingPendingTransactions = action.msgs if ((state.filter === 'to' && action.msg.toAddressHash !== state.addressHash) ||
.filter(({toAddressHash, fromAddressHash}) => ( (state.filter === 'from' && action.msg.fromAddressHash !== state.addressHash)) {
!state.filter || return state
(state.filter === 'to' && toAddressHash === state.addressHash) ||
(state.filter === 'from' && fromAddressHash === state.addressHash)
))
if (!state.pendingTransactionHashes.length && incomingPendingTransactions.length < BATCH_THRESHOLD) {
return Object.assign({}, state, {
newPendingTransactions: [
...state.newPendingTransactions,
..._.map(incomingPendingTransactions, 'transactionHtml')
]
})
} else {
return Object.assign({}, state, {
pendingTransactionHashes: [
...state.pendingTransactionHashes,
..._.map(incomingPendingTransactions, 'transactionHash')
]
})
} }
return Object.assign({}, state, {
newPendingTransactions: [
...state.newPendingTransactions,
action.msg.transactionHtml
]
})
} }
case 'RECEIVED_NEW_TRANSACTION_BATCH': { case 'RECEIVED_NEW_TRANSACTION': {
if (state.channelDisconnected) return state if (state.channelDisconnected) return state
const transactionCount = incrementTransactionsCount(action.msgs, state.addressHash, state.transactionCount) const transactionCount = state.transactionCount + 1
if (state.beyondPageOne) return Object.assign({}, state, { transactionCount })
const incomingTransactions = action.msgs if (state.beyondPageOne ||
.filter(({toAddressHash, fromAddressHash}) => ( (state.filter === 'to' && action.msg.toAddressHash !== state.addressHash) ||
!state.filter || (state.filter === 'from' && action.msg.fromAddressHash !== state.addressHash)) {
(state.filter === 'to' && toAddressHash === state.addressHash) || return Object.assign({}, state, { transactionCount })
(state.filter === 'from' && fromAddressHash === state.addressHash) }
))
const updatedPendingTransactionHashes = const updatedPendingTransactionHashes =
_.difference(state.pendingTransactionHashes, _.map(incomingTransactions, 'transactionHash')) _.without(state.pendingTransactionHashes, action.msg.transactionHash)
if (!state.batchCountAccumulator && incomingTransactions.length < BATCH_THRESHOLD) { return Object.assign({}, state, {
return Object.assign({}, state, { newTransactions: [
newTransactions: [ ...state.newTransactions,
...state.newTransactions, action.msg.transactionHtml
..._.map(incomingTransactions, 'transactionHtml') ],
], newTransactionHash: action.msg.transactionHash,
newTransactionHashes: _.map(incomingTransactions, 'transactionHash'), pendingTransactionHashes: updatedPendingTransactionHashes,
pendingTransactionHashes: updatedPendingTransactionHashes, transactionCount: transactionCount
transactionCount: transactionCount })
})
} else {
return Object.assign({}, state, {
batchCountAccumulator: state.batchCountAccumulator + incomingTransactions.length,
newTransactionHashes: _.map(incomingTransactions, 'transactionHash'),
pendingTransactionHashes: updatedPendingTransactionHashes,
transactionCount: transactionCount
})
}
} }
case 'RECEIVED_UPDATED_BALANCE': { case 'RECEIVED_UPDATED_BALANCE': {
return Object.assign({}, state, { return Object.assign({}, state, {
@ -190,25 +168,17 @@ if ($addressDetailsPage.length) {
addressChannel.on('internal_transaction', batchChannel((msgs) => addressChannel.on('internal_transaction', batchChannel((msgs) =>
store.dispatch({ type: 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }) store.dispatch({ type: 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) })
)) ))
addressChannel.on('pending_transaction', batchChannel((msgs) => addressChannel.on('pending_transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION', msg: humps.camelizeKeys(msg) }))
store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }) addressChannel.on('transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION', msg: humps.camelizeKeys(msg) }))
))
addressChannel.on('transaction', batchChannel((msgs) =>
store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) })
))
const blocksChannel = socket.channel(`blocks:${addressHash}`, {}) const blocksChannel = socket.channel(`blocks:${addressHash}`, {})
blocksChannel.join() blocksChannel.join()
blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' })) blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
blocksChannel.on('new_block', (msg) => { blocksChannel.on('new_block', (msg) => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) }))
store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) })
})
}, },
render (state, oldState) { render (state, oldState) {
const $balance = $('[data-selector="balance-card"]') const $balance = $('[data-selector="balance-card"]')
const $channelBatching = $('[data-selector="channel-batching-message"]') const $channelBatching = $('[data-selector="channel-batching-message"]')
const $channelBatchingCount = $('[data-selector="channel-batching-count"]') const $channelBatchingCount = $('[data-selector="channel-batching-count"]')
const $channelPendingBatching = $('[data-selector="channel-pending-batching-message"]')
const $channelPendingBatchingCount = $('[data-selector="channel-pending-batching-count"]')
const $channelDisconnected = $('[data-selector="channel-disconnected-message"]') const $channelDisconnected = $('[data-selector="channel-disconnected-message"]')
const $emptyInternalTransactionsList = $('[data-selector="empty-internal-transactions-list"]') const $emptyInternalTransactionsList = $('[data-selector="empty-internal-transactions-list"]')
const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]') const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]')
@ -235,19 +205,10 @@ if ($addressDetailsPage.length) {
} else { } else {
$channelBatching.hide() $channelBatching.hide()
} }
if (oldState.newPendingTransactionHashesBatch !== state.newPendingTransactionHashesBatch && state.newPendingTransactionHashesBatch.length > 0) { if (oldState.newTransactionHash !== state.newTransactionHash && state.newTransactionHash) {
$channelPendingBatching.show() let $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${state.newTransactionHash}"]`)
$channelPendingBatchingCount[0].innerHTML = numeral(state.newPendingTransactionHashesBatch.length).format() $transaction.addClass('shrink-out')
} else { setTimeout(() => $transaction.slideUp({ complete: () => $transaction.remove() }), 400)
$channelPendingBatching.hide()
}
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}"]`)
$transaction.addClass('shrink-out')
setTimeout(() => $transaction.slideUp({ complete: () => $transaction.remove() }), 400)
})
} }
if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) { if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) {
prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))

40
apps/block_scout_web/assets/js/pages/chain.js
Unescape View File

@ -5,16 +5,13 @@ import numeral from 'numeral'
import socket from '../socket' import socket from '../socket'
import { updateAllAges } from '../lib/from_now' import { updateAllAges } from '../lib/from_now'
import { exchangeRateChannel, formatUsdValue } from '../lib/currency' import { exchangeRateChannel, formatUsdValue } from '../lib/currency'
import { batchChannel, buildFullBlockList, initRedux, skippedBlockListBuilder, slideDownPrepend } from '../utils' import { buildFullBlockList, initRedux, skippedBlockListBuilder, slideDownPrepend } from '../utils'
import { createMarketHistoryChart } from '../lib/market_history_chart' import { createMarketHistoryChart } from '../lib/market_history_chart'
const BATCH_THRESHOLD = 10
export const initialState = { export const initialState = {
addressCount: null, addressCount: null,
availableSupply: null, availableSupply: null,
averageBlockTime: null, averageBlockTime: null,
batchCountAccumulator: 0,
blockNumbers: [], blockNumbers: [],
marketHistoryData: null, marketHistoryData: null,
newBlock: null, newBlock: null,
@ -85,21 +82,14 @@ export function reducer (state = initialState, action) {
usdMarketCap: action.msg.exchangeRate.marketCapUsd usdMarketCap: action.msg.exchangeRate.marketCapUsd
}) })
} }
case 'RECEIVED_NEW_TRANSACTION_BATCH': { case 'RECEIVED_NEW_TRANSACTION': {
if (!state.batchCountAccumulator && action.msgs.length < BATCH_THRESHOLD) { return Object.assign({}, state, {
return Object.assign({}, state, { newTransactions: [
newTransactions: [ ...state.newTransactions,
...state.newTransactions, action.msg.transactionHtml
...action.msgs.map(({transactionHtml}) => transactionHtml) ],
], transactionCount: state.transactionCount + 1
transactionCount: state.transactionCount + action.msgs.length })
})
} else {
return Object.assign({}, state, {
batchCountAccumulator: state.batchCountAccumulator + action.msgs.length,
transactionCount: state.transactionCount + action.msgs.length
})
}
} }
default: default:
return state return state
@ -128,9 +118,7 @@ if ($chainDetailsPage.length) {
const transactionsChannel = socket.channel(`transactions:new_transaction`) const transactionsChannel = socket.channel(`transactions:new_transaction`)
transactionsChannel.join() transactionsChannel.join()
transactionsChannel.on('transaction', batchChannel((msgs) => transactionsChannel.on('transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION', msg: humps.camelizeKeys(msg) }))
store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }))
)
chart = createMarketHistoryChart($('[data-chart="marketHistoryChart"]')[0]) chart = createMarketHistoryChart($('[data-chart="marketHistoryChart"]')[0])
}, },
@ -138,8 +126,6 @@ if ($chainDetailsPage.length) {
const $addressCount = $('[data-selector="address-count"]') const $addressCount = $('[data-selector="address-count"]')
const $averageBlockTime = $('[data-selector="average-block-time"]') const $averageBlockTime = $('[data-selector="average-block-time"]')
const $blockList = $('[data-selector="chain-block-list"]') const $blockList = $('[data-selector="chain-block-list"]')
const $channelBatching = $('[data-selector="channel-batching-message"]')
const $channelBatchingCount = $('[data-selector="channel-batching-count"]')
const $marketCap = $('[data-selector="market-cap"]') const $marketCap = $('[data-selector="market-cap"]')
const $transactionsList = $('[data-selector="transactions-list"]') const $transactionsList = $('[data-selector="transactions-list"]')
const $transactionCount = $('[data-selector="transaction-count"]') const $transactionCount = $('[data-selector="transaction-count"]')
@ -176,12 +162,6 @@ if ($chainDetailsPage.length) {
updateAllAges() updateAllAges()
} }
if (oldState.transactionCount !== state.transactionCount) $transactionCount.empty().append(numeral(state.transactionCount).format()) if (oldState.transactionCount !== state.transactionCount) $transactionCount.empty().append(numeral(state.transactionCount).format())
if (state.batchCountAccumulator) {
$channelBatching.show()
$channelBatchingCount[0].innerHTML = numeral(state.batchCountAccumulator).format()
} else {
$channelBatching.hide()
}
if (newTransactions.length) { if (newTransactions.length) {
const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length) const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length)
$transactionsList $transactionsList

10
apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
Unescape View File

@ -9,16 +9,6 @@
</div> </div>
<div class="card-body"> <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>
</div>
</div>
<div data-selector="channel-disconnected-message" class="d-none"> <div data-selector="channel-disconnected-message" class="d-none">
<div data-selector="reload-button" class="alert alert-danger"> <div data-selector="reload-button" class="alert alert-danger">
<a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a> <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>

5
apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
Unescape View File

@ -67,11 +67,6 @@
<div class="card card-chain-transactions"> <div class="card card-chain-transactions">
<div class="card-body"> <div class="card-body">
<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>
</div>
</div>
<%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %> <%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
<h2 class="card-title"><%= gettext "Transactions" %></h2> <h2 class="card-title"><%= gettext "Transactions" %></h2>
<span data-selector="transactions-list"> <span data-selector="transactions-list">

Write Preview
Loading…
Cancel
Save