From 4f6031de13b1911ad95d1f700646a6738aa65dd8 Mon Sep 17 00:00:00 2001 From: Stamates Date: Fri, 12 Oct 2018 11:55:24 -0400 Subject: [PATCH 01/16] Initial wires of a pending-transaction toggle --- apps/block_scout_web/assets/js/app.js | 9 ++++--- .../js/lib/pending_transactions_toggle.js | 20 +++++++++++++++ .../address_transaction/index.html.eex | 25 +++++++++++++++---- 3 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 394195da2f..935a325d04 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -26,16 +26,17 @@ import './lib/from_now' import './lib/indexing' import './lib/loading_element' import './lib/market_history_chart' +import './lib/pending_transactions_toggle' +import './lib/pretty_json' import './lib/reload_button' -import './lib/tooltip' import './lib/smart_contract/read_only_functions' import './lib/smart_contract/wei_ether_converter' -import './lib/pretty_json' -import './lib/try_api' +import './lib/stop_propagation' import './lib/token_balance_dropdown' import './lib/token_balance_dropdown_search' import './lib/token_transfers_toggle' -import './lib/stop_propagation' +import './lib/tooltip' +import './lib/try_api' import './pages/address' import './pages/block' diff --git a/apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js b/apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js new file mode 100644 index 0000000000..26c28465a1 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js @@ -0,0 +1,20 @@ +import $ from 'jquery' + +const pendingTransactionToggle = (element) => { + const $element = $(element) + const $pendingTransactionsClose = $element.find("[data-selector='pending-transactions-close']") + const $pendingTransactionsOpen = $element.find("[data-selector='pending-transactions-open']") + + $element.on('show.bs.collapse', () => { + $pendingTransactionsOpen.addClass('d-none') + $pendingTransactionsClose.removeClass('d-none') + }) + + $element.on('hide.bs.collapse', () => { + $pendingTransactionsClose.addClass('d-none') + $pendingTransactionsOpen.removeClass('d-none') + }) +} + +// Initialize the script scoped for each instance. +$("[data-selector='pending-transactions-toggle']").each((_index, element) => pendingTransactionToggle(element)) diff --git 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 index 733524e0f2..6869c0aa2e 100644 --- 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 @@ -61,11 +61,26 @@

<%= gettext "Transactions" %>

-
- <%= for pending_transaction <- @pending_transactions do %> - <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> - <% end %> -
+ + <%= link( + gettext("Show %{count} Pending Transactions", count: length(@pending_transactions)), + to: "#pending-transactions", + "data-toggle": "collapse", + "data-selector": "pending-transactions-open" + ) %> + <%= link( + gettext("Hide %{count} Pending Transactions", count: length(@pending_transactions)), + to: "#pending-transactions", + class: "d-none", + "data-toggle": "collapse", + "data-selector": "pending-transactions-close" + ) %> +
+ <%= for pending_transaction <- @pending_transactions do %> + <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> + <% end %> +
+
<%= if Enum.count(@transactions) > 0 do %> <%= for transaction <- @transactions do %> From acfc0ea8875da480c01135d05c176c25467e63e9 Mon Sep 17 00:00:00 2001 From: Stamates Date: Mon, 15 Oct 2018 09:52:39 -0400 Subject: [PATCH 02/16] Refactor link to allow for updatable counter --- .../address_transaction/index.html.eex | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git 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 index 6869c0aa2e..13524c15a1 100644 --- 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 @@ -62,19 +62,12 @@

<%= gettext "Transactions" %>

- <%= link( - gettext("Show %{count} Pending Transactions", count: length(@pending_transactions)), - to: "#pending-transactions", - "data-toggle": "collapse", - "data-selector": "pending-transactions-open" - ) %> - <%= link( - gettext("Hide %{count} Pending Transactions", count: length(@pending_transactions)), - to: "#pending-transactions", - class: "d-none", - "data-toggle": "collapse", - "data-selector": "pending-transactions-close" - ) %> + <%= link to: "#pending-transactions", "data-toggle": "collapse" do %> + <%= gettext("Show") %> + <%= gettext("Hide") %> + <%= length(@pending_transactions) %> + <%= gettext("Pending Transactions") %> + <% end %>
<%= for pending_transaction <- @pending_transactions do %> <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> From 215209a256891214a967c0d893df6ed13b7f4b87 Mon Sep 17 00:00:00 2001 From: Stamates Date: Mon, 15 Oct 2018 10:12:43 -0400 Subject: [PATCH 03/16] Add rendered pending transactions to initial hash list --- .../assets/__tests__/pages/address.js | 34 +++++++++++-------- .../assets/js/pages/address.js | 19 ++++++----- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/apps/block_scout_web/assets/__tests__/pages/address.js b/apps/block_scout_web/assets/__tests__/pages/address.js index 02f319caa7..eff9da2fc0 100644 --- a/apps/block_scout_web/assets/__tests__/pages/address.js +++ b/apps/block_scout_web/assets/__tests__/pages/address.js @@ -6,26 +6,30 @@ describe('PAGE_LOAD', () => { const action = { type: 'PAGE_LOAD', addressHash: '1234', - beyondPageOne: false + beyondPageOne: false, + pendingTransactionHashes: ['1'] } const output = reducer(state, action) expect(output.addressHash).toBe('1234') expect(output.beyondPageOne).toBe(false) expect(output.filter).toBe(undefined) + expect(output.pendingTransactionHashes).toEqual(['1']) }) test('page 2 without filter', () => { const state = initialState const action = { type: 'PAGE_LOAD', + addressHash: '1234', beyondPageOne: true, - addressHash: '1234' + pendingTransactionHashes: ['1'] } const output = reducer(state, action) expect(output.addressHash).toBe('1234') - expect(output.filter).toBe(undefined) expect(output.beyondPageOne).toBe(true) + expect(output.filter).toBe(undefined) + expect(output.pendingTransactionHashes).toEqual(['1']) }) test('page 1 with "to" filter', () => { const state = initialState @@ -38,22 +42,22 @@ describe('PAGE_LOAD', () => { const output = reducer(state, action) expect(output.addressHash).toBe('1234') - expect(output.filter).toBe('to') expect(output.beyondPageOne).toBe(false) + expect(output.filter).toBe('to') }) test('page 2 with "to" filter', () => { const state = initialState const action = { type: 'PAGE_LOAD', - beyondPageOne: true, addressHash: '1234', + beyondPageOne: true, filter: 'to' } const output = reducer(state, action) expect(output.addressHash).toBe('1234') - expect(output.filter).toBe('to') expect(output.beyondPageOne).toBe(true) + expect(output.filter).toBe('to') }) }) @@ -139,7 +143,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) - expect(output.newPendingTransactionHashesBatch).toEqual([ + expect(output.pendingTransactionHashes).toEqual([ "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11" ]) expect(output.batchCountAccumulator).toEqual(0) @@ -159,11 +163,11 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual(['test 1', 'test 2']) - expect(output.newPendingTransactionHashesBatch.length).toEqual(0) + expect(output.pendingTransactionHashes.length).toEqual(0) }) test('single transaction after large batch of transactions', () => { const state = Object.assign({}, initialState, { - newPendingTransactionHashesBatch: [ + pendingTransactionHashes: [ "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11" ] }) @@ -177,12 +181,12 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) - expect(output.newPendingTransactionHashesBatch.length).toEqual(12) - expect(output.newPendingTransactionHashesBatch).toContain('0x12') + 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, { - newPendingTransactionHashesBatch: [ + pendingTransactionHashes: [ "0x01", "0x02", "0x03", "0x04", "0x05", "0x06", "0x07", "0x08", "0x09", "0x10", "0x11" ] }) @@ -226,7 +230,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) - expect(output.newPendingTransactionHashesBatch.length).toEqual(22) + expect(output.pendingTransactionHashes.length).toEqual(22) }) test('after disconnection', () => { const state = Object.assign({}, initialState, { @@ -242,7 +246,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) - expect(output.newPendingTransactionHashesBatch).toEqual([]) + expect(output.pendingTransactionHashes).toEqual([]) }) test('on page 2', () => { const state = Object.assign({}, initialState, { @@ -258,7 +262,7 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) - expect(output.newPendingTransactionHashesBatch).toEqual([]) + expect(output.pendingTransactionHashes).toEqual([]) expect(output.batchCountAccumulator).toEqual(0) }) }) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index d8e7beb849..e9ba5f2533 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -35,7 +35,7 @@ export const initialState = { newPendingTransactions: [], newTransactions: [], newTransactionHashes: [], - newPendingTransactionHashesBatch: [], + pendingTransactionHashes: [], transactionCount: null, validationCount: null } @@ -47,6 +47,7 @@ export function reducer (state = initialState, action) { addressHash: action.addressHash, beyondPageOne: action.beyondPageOne, filter: action.filter, + pendingTransactionHashes: action.pendingTransactionHashes, transactionCount: numeral(action.transactionCount).value(), validationCount: action.validationCount ? numeral(action.validationCount).value() : null }) @@ -102,7 +103,7 @@ export function reducer (state = initialState, action) { (state.filter === 'to' && toAddressHash === state.addressHash) || (state.filter === 'from' && fromAddressHash === state.addressHash) )) - if (!state.newPendingTransactionHashesBatch.length && incomingPendingTransactions.length < BATCH_THRESHOLD) { + if (!state.pendingTransactionHashes.length && incomingPendingTransactions.length < BATCH_THRESHOLD) { return Object.assign({}, state, { newPendingTransactions: [ ...state.newPendingTransactions, @@ -111,8 +112,8 @@ export function reducer (state = initialState, action) { }) } else { return Object.assign({}, state, { - newPendingTransactionHashesBatch: [ - ...state.newPendingTransactionHashesBatch, + pendingTransactionHashes: [ + ...state.pendingTransactionHashes, ..._.map(incomingPendingTransactions, 'transactionHash') ] }) @@ -132,8 +133,8 @@ export function reducer (state = initialState, action) { (state.filter === 'from' && fromAddressHash === state.addressHash) )) - const updatedPendingTransactionHashesBatch = - _.difference(state.newPendingTransactionHashesBatch, _.map(incomingTransactions, 'transactionHash')) + const updatedPendingTransactionHashes = + _.difference(state.pendingTransactionHashes, _.map(incomingTransactions, 'transactionHash')) if (!state.batchCountAccumulator && incomingTransactions.length < BATCH_THRESHOLD) { return Object.assign({}, state, { @@ -142,14 +143,14 @@ export function reducer (state = initialState, action) { ..._.map(incomingTransactions, 'transactionHtml') ], newTransactionHashes: _.map(incomingTransactions, 'transactionHash'), - newPendingTransactionHashesBatch: updatedPendingTransactionHashesBatch, + pendingTransactionHashes: updatedPendingTransactionHashes, transactionCount: transactionCount }) } else { return Object.assign({}, state, { batchCountAccumulator: state.batchCountAccumulator + incomingTransactions.length, newTransactionHashes: _.map(incomingTransactions, 'transactionHash'), - newPendingTransactionHashesBatch: updatedPendingTransactionHashesBatch, + pendingTransactionHashes: updatedPendingTransactionHashes, transactionCount: transactionCount }) } @@ -176,6 +177,8 @@ if ($addressDetailsPage.length) { addressHash, beyondPageOne: !!blockNumber, filter, + pendingTransactionHashes: $('[data-selector="pending-transactions-list"]') + .map((index, el) => el.dataset.transactionHash).toArray(), transactionCount: $('[data-selector="transaction-count"]').text(), validationCount: $('[data-selector="validation-count"]') ? $('[data-selector="validation-count"]').text() : null }) From 531a16d7616c86d3638ef724cef7b41ccf2ed05c Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Mon, 15 Oct 2018 14:31:14 -0400 Subject: [PATCH 04/16] Stop trimming bottom on transactions live reload Co-authored-by: Stamates --- apps/block_scout_web/assets/js/pages/transaction.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/transaction.js b/apps/block_scout_web/assets/js/pages/transaction.js index 0c91a7cc5e..e6b27e2ae5 100644 --- a/apps/block_scout_web/assets/js/pages/transaction.js +++ b/apps/block_scout_web/assets/js/pages/transaction.js @@ -189,12 +189,6 @@ if ($transactionPendingListPage.length) { } if (oldState.newPendingTransactions !== state.newPendingTransactions) { const newTransactionsToInsert = state.newPendingTransactions.slice(oldState.newPendingTransactions.length) - $pendingTransactionsList - .children() - .slice($pendingTransactionsList.children().length - newTransactionsToInsert.length, - $pendingTransactionsList.children().length - ) - .remove() prependWithClingBottom($pendingTransactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() @@ -236,10 +230,6 @@ if ($transactionListPage.length) { } if (oldState.newTransactions !== state.newTransactions) { const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length) - $transactionsList - .children() - .slice($transactionsList.children().length - newTransactionsToInsert.length, $transactionsList.children().length) - .remove() prependWithClingBottom($transactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() From 6433ddd78221b8de1bfee88c55c7d7d1e56d0bc2 Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Mon, 15 Oct 2018 15:08:22 -0400 Subject: [PATCH 05/16] Stop channel batching in most places unless absolutely necessary --- .../assets/__tests__/pages/address.js | 362 +++--------------- .../assets/__tests__/pages/chain.js | 102 +---- .../assets/js/pages/address.js | 111 ++---- apps/block_scout_web/assets/js/pages/chain.js | 40 +- .../address_transaction/index.html.eex | 10 - .../templates/chain/show.html.eex | 5 - 6 files changed, 97 insertions(+), 533 deletions(-) diff --git a/apps/block_scout_web/assets/__tests__/pages/address.js b/apps/block_scout_web/assets/__tests__/pages/address.js index eff9da2fc0..cf1a24e1f7 100644 --- a/apps/block_scout_web/assets/__tests__/pages/address.js +++ b/apps/block_scout_web/assets/__tests__/pages/address.js @@ -69,7 +69,6 @@ test('CHANNEL_DISCONNECTED', () => { const output = reducer(state, action) expect(output.channelDisconnected).toBe(true) - expect(output.batchCountAccumulator).toBe(0) }) test('RECEIVED_UPDATED_BALANCE', () => { @@ -85,68 +84,19 @@ test('RECEIVED_UPDATED_BALANCE', () => { expect(output.balance).toBe('hello world') }) -describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { +describe('RECEIVED_NEW_PENDING_TRANSACTION', () => { test('single transaction', () => { const state = initialState const action = { - type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_PENDING_TRANSACTION', + msg: { transactionHash: '0x00', transactionHtml: 'test' - }] + } } const output = reducer(state, action) 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) }) test('single transaction after single transaction', () => { @@ -154,94 +104,27 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { newPendingTransactions: ['test 1'] }) const action = { - type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_PENDING_TRANSACTION', + msg: { transactionHash: '0x02', transactionHtml: 'test 2' - }] + } } const output = reducer(state, action) expect(output.newPendingTransactions).toEqual(['test 1', 'test 2']) 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', () => { const state = Object.assign({}, initialState, { channelDisconnected: true }) const action = { - type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_PENDING_TRANSACTION', + msg: { transactionHash: '0x00', transactionHtml: 'test' - }] + } } const output = reducer(state, action) @@ -253,174 +136,62 @@ describe('RECEIVED_NEW_PENDING_TRANSACTION_BATCH', () => { beyondPageOne: true }) const action = { - type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_PENDING_TRANSACTION', + msg: { transactionHash: '0x00', transactionHtml: 'test' - }] + } } const output = reducer(state, action) expect(output.newPendingTransactions).toEqual([]) expect(output.pendingTransactionHashes).toEqual([]) - expect(output.batchCountAccumulator).toEqual(0) }) }) -describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { +describe('RECEIVED_NEW_TRANSACTION', () => { test('single transaction', () => { const state = Object.assign({}, initialState, { addressHash: '0x111' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ - transactionHtml: 'test', - fromAddressHash: '0x111' - }] + type: 'RECEIVED_NEW_TRANSACTION', + msg: { + transactionHtml: 'test' + } } const output = reducer(state, action) 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: [{ - 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', () => { const state = Object.assign({}, initialState, { newTransactions: ['test 1'] }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { transactionHtml: 'test 2' - }] + } } const output = reducer(state, action) 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', () => { const state = Object.assign({}, initialState, { channelDisconnected: true }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { transactionHtml: 'test' - }] + } } const output = reducer(state, action) expect(output.newTransactions).toEqual([]) - expect(output.batchCountAccumulator).toEqual(0) }) test('on page 2', () => { const state = Object.assign({}, initialState, { @@ -429,16 +200,14 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { addressHash: '0x111' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ - transactionHtml: 'test', - fromAddressHash: '0x111' - }] + type: 'RECEIVED_NEW_TRANSACTION', + msg: { + transactionHtml: 'test' + } } const output = reducer(state, action) expect(output.newTransactions).toEqual([]) - expect(output.batchCountAccumulator).toEqual(0) expect(output.transactionCount).toEqual(2) }) test('transaction from current address with "from" filter', () => { @@ -447,11 +216,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { filter: 'from' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { fromAddressHash: '1234', transactionHtml: 'test' - }] + } } const output = reducer(state, action) @@ -463,11 +232,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { filter: 'to' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { fromAddressHash: '1234', transactionHtml: 'test' - }] + } } const output = reducer(state, action) @@ -479,11 +248,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { filter: 'to' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { toAddressHash: '1234', transactionHtml: 'test' - }] + } } const output = reducer(state, action) @@ -495,11 +264,11 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { filter: 'from' }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { toAddressHash: '1234', transactionHtml: 'test' - }] + } } const output = reducer(state, action) @@ -508,58 +277,15 @@ describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { test('single transaction collated from pending', () => { const state = initialState const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { transactionHash: '0x00', transactionHtml: 'test' - }] + } } const output = reducer(state, action) expect(output.newTransactions).toEqual(['test']) - expect(output.batchCountAccumulator).toEqual(0) - }) - 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([]) + expect(output.transactionCount).toEqual(1) }) }) diff --git a/apps/block_scout_web/assets/__tests__/pages/chain.js b/apps/block_scout_web/assets/__tests__/pages/chain.js index 4f0cde7106..9ff632f2d4 100644 --- a/apps/block_scout_web/assets/__tests__/pages/chain.js +++ b/apps/block_scout_web/assets/__tests__/pages/chain.js @@ -195,120 +195,32 @@ test('RECEIVED_NEW_EXCHANGE_RATE', () => { expect(output.usdMarketCap).toEqual(1230000) }) -describe('RECEIVED_NEW_TRANSACTION_BATCH', () => { +describe('RECEIVED_NEW_TRANSACTION', () => { test('single transaction', () => { const state = initialState const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { transactionHtml: 'test' - }] + } } const output = reducer(state, action) 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: [{ - 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', () => { const state = Object.assign({}, initialState, { newTransactions: ['test 1'] }) const action = { - type: 'RECEIVED_NEW_TRANSACTION_BATCH', - msgs: [{ + type: 'RECEIVED_NEW_TRANSACTION', + msg: { transactionHtml: 'test 2' - }] + } } const output = reducer(state, action) 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) }) }) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index e9ba5f2533..5be64da4a4 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -34,7 +34,7 @@ export const initialState = { newInternalTransactions: [], newPendingTransactions: [], newTransactions: [], - newTransactionHashes: [], + newTransactionHash: null, pendingTransactionHashes: [], transactionCount: 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 - const incomingPendingTransactions = action.msgs - .filter(({toAddressHash, fromAddressHash}) => ( - !state.filter || - (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') - ] - }) + if ((state.filter === 'to' && action.msg.toAddressHash !== state.addressHash) || + (state.filter === 'from' && action.msg.fromAddressHash !== state.addressHash)) { + return state } + + return Object.assign({}, state, { + newPendingTransactions: [ + ...state.newPendingTransactions, + action.msg.transactionHtml + ] + }) } - case 'RECEIVED_NEW_TRANSACTION_BATCH': { + case 'RECEIVED_NEW_TRANSACTION': { if (state.channelDisconnected) return state - const transactionCount = incrementTransactionsCount(action.msgs, state.addressHash, state.transactionCount) - - if (state.beyondPageOne) return Object.assign({}, state, { transactionCount }) + const transactionCount = state.transactionCount + 1 - const incomingTransactions = action.msgs - .filter(({toAddressHash, fromAddressHash}) => ( - !state.filter || - (state.filter === 'to' && toAddressHash === state.addressHash) || - (state.filter === 'from' && fromAddressHash === state.addressHash) - )) + if (state.beyondPageOne || + (state.filter === 'to' && action.msg.toAddressHash !== state.addressHash) || + (state.filter === 'from' && action.msg.fromAddressHash !== state.addressHash)) { + return Object.assign({}, state, { transactionCount }) + } 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, { - newTransactions: [ - ...state.newTransactions, - ..._.map(incomingTransactions, 'transactionHtml') - ], - newTransactionHashes: _.map(incomingTransactions, 'transactionHash'), - pendingTransactionHashes: updatedPendingTransactionHashes, - transactionCount: transactionCount - }) - } else { - return Object.assign({}, state, { - batchCountAccumulator: state.batchCountAccumulator + incomingTransactions.length, - newTransactionHashes: _.map(incomingTransactions, 'transactionHash'), - pendingTransactionHashes: updatedPendingTransactionHashes, - transactionCount: transactionCount - }) - } + return Object.assign({}, state, { + newTransactions: [ + ...state.newTransactions, + action.msg.transactionHtml + ], + newTransactionHash: action.msg.transactionHash, + pendingTransactionHashes: updatedPendingTransactionHashes, + transactionCount: transactionCount + }) } case 'RECEIVED_UPDATED_BALANCE': { return Object.assign({}, state, { @@ -190,25 +168,17 @@ if ($addressDetailsPage.length) { addressChannel.on('internal_transaction', batchChannel((msgs) => store.dispatch({ type: 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }) )) - addressChannel.on('pending_transaction', batchChannel((msgs) => - store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }) - )) - addressChannel.on('transaction', batchChannel((msgs) => - store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }) - )) + addressChannel.on('pending_transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION', msg: humps.camelizeKeys(msg) })) + addressChannel.on('transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION', msg: humps.camelizeKeys(msg) })) const blocksChannel = socket.channel(`blocks:${addressHash}`, {}) blocksChannel.join() blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' })) - blocksChannel.on('new_block', (msg) => { - store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) }) - }) + blocksChannel.on('new_block', (msg) => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) })) }, render (state, oldState) { const $balance = $('[data-selector="balance-card"]') const $channelBatching = $('[data-selector="channel-batching-message"]') 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 $emptyInternalTransactionsList = $('[data-selector="empty-internal-transactions-list"]') const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]') @@ -235,19 +205,10 @@ if ($addressDetailsPage.length) { } else { $channelBatching.hide() } - if (oldState.newPendingTransactionHashesBatch !== state.newPendingTransactionHashesBatch && state.newPendingTransactionHashesBatch.length > 0) { - $channelPendingBatching.show() - $channelPendingBatchingCount[0].innerHTML = numeral(state.newPendingTransactionHashesBatch.length).format() - } else { - $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.newTransactionHash !== state.newTransactionHash && state.newTransactionHash) { + let $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${state.newTransactionHash}"]`) + $transaction.addClass('shrink-out') + setTimeout(() => $transaction.slideUp({ complete: () => $transaction.remove() }), 400) } if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) { prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) diff --git a/apps/block_scout_web/assets/js/pages/chain.js b/apps/block_scout_web/assets/js/pages/chain.js index c9755da39e..4586fff98f 100644 --- a/apps/block_scout_web/assets/js/pages/chain.js +++ b/apps/block_scout_web/assets/js/pages/chain.js @@ -5,16 +5,13 @@ import numeral from 'numeral' import socket from '../socket' import { updateAllAges } from '../lib/from_now' 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' -const BATCH_THRESHOLD = 10 - export const initialState = { addressCount: null, availableSupply: null, averageBlockTime: null, - batchCountAccumulator: 0, blockNumbers: [], marketHistoryData: null, newBlock: null, @@ -85,21 +82,14 @@ export function reducer (state = initialState, action) { usdMarketCap: action.msg.exchangeRate.marketCapUsd }) } - case 'RECEIVED_NEW_TRANSACTION_BATCH': { - if (!state.batchCountAccumulator && action.msgs.length < BATCH_THRESHOLD) { - return Object.assign({}, state, { - newTransactions: [ - ...state.newTransactions, - ...action.msgs.map(({transactionHtml}) => transactionHtml) - ], - transactionCount: state.transactionCount + action.msgs.length - }) - } else { - return Object.assign({}, state, { - batchCountAccumulator: state.batchCountAccumulator + action.msgs.length, - transactionCount: state.transactionCount + action.msgs.length - }) - } + case 'RECEIVED_NEW_TRANSACTION': { + return Object.assign({}, state, { + newTransactions: [ + ...state.newTransactions, + action.msg.transactionHtml + ], + transactionCount: state.transactionCount + 1 + }) } default: return state @@ -128,9 +118,7 @@ if ($chainDetailsPage.length) { const transactionsChannel = socket.channel(`transactions:new_transaction`) transactionsChannel.join() - transactionsChannel.on('transaction', batchChannel((msgs) => - store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) })) - ) + transactionsChannel.on('transaction', (msg) => store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION', msg: humps.camelizeKeys(msg) })) chart = createMarketHistoryChart($('[data-chart="marketHistoryChart"]')[0]) }, @@ -138,8 +126,6 @@ if ($chainDetailsPage.length) { const $addressCount = $('[data-selector="address-count"]') const $averageBlockTime = $('[data-selector="average-block-time"]') 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 $transactionsList = $('[data-selector="transactions-list"]') const $transactionCount = $('[data-selector="transaction-count"]') @@ -176,12 +162,6 @@ if ($chainDetailsPage.length) { updateAllAges() } 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) { const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length) $transactionsList diff --git 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 index 13524c15a1..d313d84cab 100644 --- 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,16 +9,6 @@
- -
<%= gettext "Connection Lost, click to load newer transactions" %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex index bc8b546e58..ff0c15f50e 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex @@ -67,11 +67,6 @@
- <%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>

<%= gettext "Transactions" %>

From 71777e0e9a0ce5ca125f566e50e82135d0310dd7 Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Mon, 15 Oct 2018 15:46:24 -0400 Subject: [PATCH 06/16] Update number of pending transactions --- apps/block_scout_web/assets/js/pages/address.js | 10 +++++++++- apps/block_scout_web/assets/js/utils.js | 6 +++--- .../templates/address_transaction/index.html.eex | 4 ++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index 5be64da4a4..feb588cc8b 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -106,6 +106,10 @@ export function reducer (state = initialState, action) { newPendingTransactions: [ ...state.newPendingTransactions, action.msg.transactionHtml + ], + pendingTransactionHashes: [ + ...state.pendingTransactionHashes, + action.msg.transactionHash ] }) } @@ -155,7 +159,7 @@ if ($addressDetailsPage.length) { addressHash, beyondPageOne: !!blockNumber, filter, - pendingTransactionHashes: $('[data-selector="pending-transactions-list"]') + pendingTransactionHashes: $('[data-selector="pending-transactions-list"]').children() .map((index, el) => el.dataset.transactionHash).toArray(), transactionCount: $('[data-selector="transaction-count"]').text(), validationCount: $('[data-selector="validation-count"]') ? $('[data-selector="validation-count"]').text() : null @@ -183,6 +187,7 @@ if ($addressDetailsPage.length) { const $emptyInternalTransactionsList = $('[data-selector="empty-internal-transactions-list"]') const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]') const $internalTransactionsList = $('[data-selector="internal-transactions-list"]') + const $pendingTransactionsCount = $('[data-selector="pending-transactions-count"]') const $pendingTransactionsList = $('[data-selector="pending-transactions-list"]') const $transactionCount = $('[data-selector="transaction-count"]') const $transactionsList = $('[data-selector="transactions-list"]') @@ -214,6 +219,9 @@ if ($addressDetailsPage.length) { prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) updateAllAges() } + if (oldState.pendingTransactionHashes.length !== state.pendingTransactionHashes.length && $pendingTransactionsCount.length) { + $pendingTransactionsCount[0].innerHTML = numeral(state.pendingTransactionHashes.length).format() + } if (oldState.newPendingTransactions !== state.newPendingTransactions && $pendingTransactionsList.length) { prependWithClingBottom($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join('')) updateAllAges() diff --git a/apps/block_scout_web/assets/js/utils.js b/apps/block_scout_web/assets/js/utils.js index 6544debd3c..6e633b7613 100644 --- a/apps/block_scout_web/assets/js/utils.js +++ b/apps/block_scout_web/assets/js/utils.js @@ -56,13 +56,13 @@ export function slideDownBefore ($el, content, callback) { $content.slideDown({ complete: callback }) } export function prependWithClingBottom ($el, content) { - return slideDownPrepend($el, content, clingBottom($el, content)) + return slideDownPrepend($el, content, clingBottom($el)) } export function beforeWithClingBottom ($el, content) { - return slideDownBefore($el, content, clingBottom($el, content)) + return slideDownBefore($el, content, clingBottom($el)) } -function clingBottom ($el, content) { +function clingBottom ($el) { function userAtTop () { return window.scrollY < $('[data-selector="navbar"]').outerHeight() } diff --git 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 index d313d84cab..8f74aca73b 100644 --- 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 @@ -52,11 +52,11 @@

<%= gettext "Transactions" %>

+ <%= length(@pending_transactions) %> + <%= gettext("Pending Transactions") %> <%= link to: "#pending-transactions", "data-toggle": "collapse" do %> <%= gettext("Show") %> <%= gettext("Hide") %> - <%= length(@pending_transactions) %> - <%= gettext("Pending Transactions") %> <% end %>
<%= for pending_transaction <- @pending_transactions do %> From 0eab4537d97ad4f61c4cd884cf56ad4799e6a580 Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Tue, 16 Oct 2018 09:55:21 -0400 Subject: [PATCH 07/16] Smooth out animation when transaction goes from pending to validated Co-authored-by: Stamates --- .../assets/js/pages/address.js | 22 +++++++++++-------- .../address_transaction/index.html.eex | 1 + 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index feb588cc8b..e5b54a8482 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -34,7 +34,6 @@ export const initialState = { newInternalTransactions: [], newPendingTransactions: [], newTransactions: [], - newTransactionHash: null, pendingTransactionHashes: [], transactionCount: null, validationCount: null @@ -130,9 +129,8 @@ export function reducer (state = initialState, action) { return Object.assign({}, state, { newTransactions: [ ...state.newTransactions, - action.msg.transactionHtml + action.msg ], - newTransactionHash: action.msg.transactionHash, pendingTransactionHashes: updatedPendingTransactionHashes, transactionCount: transactionCount }) @@ -210,11 +208,6 @@ if ($addressDetailsPage.length) { } else { $channelBatching.hide() } - if (oldState.newTransactionHash !== state.newTransactionHash && state.newTransactionHash) { - let $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${state.newTransactionHash}"]`) - $transaction.addClass('shrink-out') - setTimeout(() => $transaction.slideUp({ complete: () => $transaction.remove() }), 400) - } if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) { prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) updateAllAges() @@ -227,7 +220,18 @@ if ($addressDetailsPage.length) { updateAllAges() } if (oldState.newTransactions !== state.newTransactions && $transactionsList.length) { - prependWithClingBottom($transactionsList, state.newTransactions.slice(oldState.newTransactions.length).reverse().join('')) + const newlyValidatedTransactions = state.newTransactions.slice(oldState.newTransactions.length).reverse() + newlyValidatedTransactions.forEach(({ transactionHash, transactionHtml }) => { + let $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${transactionHash}"]`) + $transaction.html($(transactionHtml).html()) + setTimeout(() => { + $transaction.addClass('shrink-out') + setTimeout(() => { + $transaction.slideUp({ complete: () => $transaction.remove() }) + prependWithClingBottom($transactionsList, transactionHtml) + }, 400) + }, 1000) + }) updateAllAges() } if (oldState.newBlock !== state.newBlock) { diff --git 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 index 8f74aca73b..d39fdcc7de 100644 --- 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 @@ -62,6 +62,7 @@ <%= for pending_transaction <- @pending_transactions do %> <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> <% end %> +
<%= if Enum.count(@transactions) > 0 do %> From 914a6fe8b73ba79b04a20571ca60ad115c04746a Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Tue, 16 Oct 2018 12:23:51 -0400 Subject: [PATCH 08/16] Upgrade clingBottom to handle removals and be easier to use Co-authored-by: Stamates --- .../assets/js/pages/address.js | 14 ++-- apps/block_scout_web/assets/js/pages/block.js | 8 ++- .../assets/js/pages/transaction.js | 8 ++- apps/block_scout_web/assets/js/utils.js | 65 +++++++++---------- 4 files changed, 48 insertions(+), 47 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index e5b54a8482..aa47109e14 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -4,7 +4,7 @@ import URI from 'urijs' import humps from 'humps' import numeral from 'numeral' import socket from '../socket' -import { batchChannel, initRedux, prependWithClingBottom } from '../utils' +import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils' import { updateAllAges } from '../lib/from_now' import { updateAllCalculatedUsdValues } from '../lib/currency.js' import { loadTokenBalanceDropdown } from '../lib/token_balance_dropdown' @@ -209,14 +209,16 @@ if ($addressDetailsPage.length) { $channelBatching.hide() } if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) { - prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) + clingBottom() + slideDownPrepend($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) updateAllAges() } if (oldState.pendingTransactionHashes.length !== state.pendingTransactionHashes.length && $pendingTransactionsCount.length) { $pendingTransactionsCount[0].innerHTML = numeral(state.pendingTransactionHashes.length).format() } if (oldState.newPendingTransactions !== state.newPendingTransactions && $pendingTransactionsList.length) { - prependWithClingBottom($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join('')) + clingBottom() + slideDownPrepend($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join('')) updateAllAges() } if (oldState.newTransactions !== state.newTransactions && $transactionsList.length) { @@ -227,15 +229,17 @@ if ($addressDetailsPage.length) { setTimeout(() => { $transaction.addClass('shrink-out') setTimeout(() => { + clingBottom() $transaction.slideUp({ complete: () => $transaction.remove() }) - prependWithClingBottom($transactionsList, transactionHtml) + slideDownPrepend($transactionsList, transactionHtml) }, 400) }, 1000) }) updateAllAges() } if (oldState.newBlock !== state.newBlock) { - prependWithClingBottom($validationsList, state.newBlock) + clingBottom() + slideDownPrepend($validationsList, state.newBlock) updateAllAges() } } diff --git a/apps/block_scout_web/assets/js/pages/block.js b/apps/block_scout_web/assets/js/pages/block.js index 4e137984a6..2f759aa8ae 100644 --- a/apps/block_scout_web/assets/js/pages/block.js +++ b/apps/block_scout_web/assets/js/pages/block.js @@ -4,7 +4,7 @@ import URI from 'urijs' import humps from 'humps' import socket from '../socket' import { updateAllAges } from '../lib/from_now' -import { buildFullBlockList, initRedux, beforeWithClingBottom, skippedBlockListBuilder } from '../utils' +import { buildFullBlockList, initRedux, slideDownBefore, skippedBlockListBuilder, clingBottom } from '../utils' export const initialState = { blockNumbers: [], @@ -97,10 +97,12 @@ if ($blockListPage.length) { } else { if (skippedBlockNumbers.length) { _.forEachRight(skippedBlockNumbers, (skippedBlockNumber) => { - beforeWithClingBottom($(`[data-block-number="${skippedBlockNumber - 1}"]`), placeHolderBlock(skippedBlockNumber)) + clingBottom() + slideDownBefore($(`[data-block-number="${skippedBlockNumber - 1}"]`), placeHolderBlock(skippedBlockNumber)) }) } - beforeWithClingBottom($(`[data-block-number="${state.blockNumbers[0] - 1}"]`), state.newBlock) + clingBottom() + slideDownBefore($(`[data-block-number="${state.blockNumbers[0] - 1}"]`), state.newBlock) } updateAllAges() } diff --git a/apps/block_scout_web/assets/js/pages/transaction.js b/apps/block_scout_web/assets/js/pages/transaction.js index e6b27e2ae5..fa8f119c0e 100644 --- a/apps/block_scout_web/assets/js/pages/transaction.js +++ b/apps/block_scout_web/assets/js/pages/transaction.js @@ -5,7 +5,7 @@ import humps from 'humps' import numeral from 'numeral' import socket from '../socket' import { updateAllAges } from '../lib/from_now' -import { batchChannel, initRedux, prependWithClingBottom } from '../utils' +import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils' const BATCH_THRESHOLD = 10 @@ -189,7 +189,8 @@ if ($transactionPendingListPage.length) { } if (oldState.newPendingTransactions !== state.newPendingTransactions) { const newTransactionsToInsert = state.newPendingTransactions.slice(oldState.newPendingTransactions.length) - prependWithClingBottom($pendingTransactionsList, newTransactionsToInsert.reverse().join('')) + clingBottom() + slideDownPrepend($pendingTransactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() } @@ -230,7 +231,8 @@ if ($transactionListPage.length) { } if (oldState.newTransactions !== state.newTransactions) { const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length) - prependWithClingBottom($transactionsList, newTransactionsToInsert.reverse().join('')) + clingBottom() + slideDownPrepend($transactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() } diff --git a/apps/block_scout_web/assets/js/utils.js b/apps/block_scout_web/assets/js/utils.js index 6e633b7613..5ebcb1af3b 100644 --- a/apps/block_scout_web/assets/js/utils.js +++ b/apps/block_scout_web/assets/js/utils.js @@ -45,61 +45,54 @@ export function skippedBlockListBuilder (skippedBlockNumbers, newestBlock, oldes return skippedBlockNumbers } -export function slideDownPrepend ($el, content, callback) { +export function slideDownPrepend ($el, content) { const $content = $(content) $el.prepend($content.hide()) - $content.slideDown({ complete: callback }) + return $content.slideDown() } -export function slideDownBefore ($el, content, callback) { +export function slideDownBefore ($el, content) { const $content = $(content) $el.before($content.hide()) - $content.slideDown({ complete: callback }) -} -export function prependWithClingBottom ($el, content) { - return slideDownPrepend($el, content, clingBottom($el)) -} -export function beforeWithClingBottom ($el, content) { - return slideDownBefore($el, content, clingBottom($el)) + return $content.slideDown() } -function clingBottom ($el) { +let clingBottomLoop +export function clingBottom ($el, content) { + if (clingBottomLoop) window.cancelAnimationFrame(clingBottomLoop) + function userAtTop () { return window.scrollY < $('[data-selector="navbar"]').outerHeight() } - if (userAtTop()) return true - - let isAnimating - function setIsAnimating () { - isAnimating = true - } - $el.on('animationstart', setIsAnimating) + if (userAtTop()) return + let pageHeight = document.body.scrollHeight let startingScrollPosition = window.scrollY let endingScrollPosition = window.scrollY function userIsScrolling () { - return window.scrollY < startingScrollPosition || endingScrollPosition < window.scrollY + const pageHeightDiff = Math.abs(document.body.scrollHeight - pageHeight) + const minScrollPosition = _.min([ + startingScrollPosition, + endingScrollPosition + ]) - pageHeightDiff + const maxScrollPosition = _.max([ + startingScrollPosition, + endingScrollPosition + ]) + pageHeightDiff + return window.scrollY < minScrollPosition || maxScrollPosition < window.scrollY } const clingDistanceFromBottom = document.body.scrollHeight - window.scrollY - let clingBottomLoop = window.requestAnimationFrame(function clingBottom () { - if (userIsScrolling()) return stopClinging() + clingBottomLoop = window.requestAnimationFrame(function clingBottomFrame () { + if (userIsScrolling()) { + window.cancelAnimationFrame(clingBottomLoop) + clingBottomLoop = null + return + } + pageHeight = document.body.scrollHeight startingScrollPosition = window.scrollY - endingScrollPosition = document.body.scrollHeight - clingDistanceFromBottom + endingScrollPosition = pageHeight - clingDistanceFromBottom $(window).scrollTop(endingScrollPosition) - clingBottomLoop = window.requestAnimationFrame(clingBottom) + clingBottomLoop = window.requestAnimationFrame(clingBottomFrame) }) - - function stopClinging () { - window.cancelAnimationFrame(clingBottomLoop) - $el.off('animationstart', setIsAnimating) - $el.off('animationend animationcancel', stopClinging) - } - - return { - function () { - $el.on('animationend animationcancel', stopClinging) - setTimeout(() => !isAnimating && stopClinging(), 100) - } - } } From c097f7e48523fb3fa2b0570463495f3a93289c0d Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Tue, 16 Oct 2018 14:19:10 -0400 Subject: [PATCH 09/16] Remove delay adding validated transaction if pending transactions are hidden Co-authored-by: Stamates --- .../assets/js/pages/address.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index aa47109e14..9c323f1e07 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -226,14 +226,20 @@ if ($addressDetailsPage.length) { newlyValidatedTransactions.forEach(({ transactionHash, transactionHtml }) => { let $transaction = $(`[data-selector="pending-transactions-list"] [data-transaction-hash="${transactionHash}"]`) $transaction.html($(transactionHtml).html()) - setTimeout(() => { - $transaction.addClass('shrink-out') + if ($transaction.is(':visible')) { setTimeout(() => { - clingBottom() - $transaction.slideUp({ complete: () => $transaction.remove() }) - slideDownPrepend($transactionsList, transactionHtml) - }, 400) - }, 1000) + $transaction.addClass('shrink-out') + setTimeout(() => { + clingBottom() + $transaction.slideUp({ complete: () => $transaction.remove() }) + slideDownPrepend($transactionsList, transactionHtml) + }, 400) + }, 1000) + } else { + clingBottom() + $transaction.remove() + slideDownPrepend($transactionsList, transactionHtml) + } }) updateAllAges() } From af49a63a7b41932b63662521a1a9f7fce60028b6 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Wed, 17 Oct 2018 15:43:22 -0400 Subject: [PATCH 10/16] Style hide/show pending txn link --- .../templates/address_transaction/index.html.eex | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git 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 index d39fdcc7de..9dda749f2c 100644 --- 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 @@ -51,12 +51,13 @@

<%= gettext "Transactions" %>

- - <%= length(@pending_transactions) %> - <%= gettext("Pending Transactions") %> - <%= link to: "#pending-transactions", "data-toggle": "collapse" do %> - <%= gettext("Show") %> +
+ <%= link to: "#pending-transactions", class: "d-inline-block mb-3", "data-toggle": "collapse" do %> + + <%= gettext("Show") %> <%= gettext("Hide") %> + <%= length(@pending_transactions) %> + <%= gettext("Pending Transactions") %> <% end %>
<%= for pending_transaction <- @pending_transactions do %> @@ -64,7 +65,7 @@ <% end %>
- +
<%= if Enum.count(@transactions) > 0 do %> <%= for transaction <- @transactions do %> From 793935789353daa53918b1e6b1aeff9584cba091 Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Wed, 17 Oct 2018 22:31:44 -0400 Subject: [PATCH 11/16] Remove clingBottom --- .../assets/js/pages/address.js | 9 +- apps/block_scout_web/assets/js/pages/block.js | 4 +- .../assets/js/pages/transaction.js | 18 ++-- apps/block_scout_web/assets/js/utils.js | 93 ++++++++++--------- 4 files changed, 61 insertions(+), 63 deletions(-) diff --git a/apps/block_scout_web/assets/js/pages/address.js b/apps/block_scout_web/assets/js/pages/address.js index 9c323f1e07..74301a1643 100644 --- a/apps/block_scout_web/assets/js/pages/address.js +++ b/apps/block_scout_web/assets/js/pages/address.js @@ -4,7 +4,7 @@ import URI from 'urijs' import humps from 'humps' import numeral from 'numeral' import socket from '../socket' -import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils' +import { batchChannel, initRedux, slideDownPrepend, slideUpRemove } from '../utils' import { updateAllAges } from '../lib/from_now' import { updateAllCalculatedUsdValues } from '../lib/currency.js' import { loadTokenBalanceDropdown } from '../lib/token_balance_dropdown' @@ -209,7 +209,6 @@ if ($addressDetailsPage.length) { $channelBatching.hide() } if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) { - clingBottom() slideDownPrepend($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join('')) updateAllAges() } @@ -217,7 +216,6 @@ if ($addressDetailsPage.length) { $pendingTransactionsCount[0].innerHTML = numeral(state.pendingTransactionHashes.length).format() } if (oldState.newPendingTransactions !== state.newPendingTransactions && $pendingTransactionsList.length) { - clingBottom() slideDownPrepend($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join('')) updateAllAges() } @@ -230,13 +228,11 @@ if ($addressDetailsPage.length) { setTimeout(() => { $transaction.addClass('shrink-out') setTimeout(() => { - clingBottom() - $transaction.slideUp({ complete: () => $transaction.remove() }) + slideUpRemove($transaction) slideDownPrepend($transactionsList, transactionHtml) }, 400) }, 1000) } else { - clingBottom() $transaction.remove() slideDownPrepend($transactionsList, transactionHtml) } @@ -244,7 +240,6 @@ if ($addressDetailsPage.length) { updateAllAges() } if (oldState.newBlock !== state.newBlock) { - clingBottom() slideDownPrepend($validationsList, state.newBlock) updateAllAges() } diff --git a/apps/block_scout_web/assets/js/pages/block.js b/apps/block_scout_web/assets/js/pages/block.js index 2f759aa8ae..550aafda28 100644 --- a/apps/block_scout_web/assets/js/pages/block.js +++ b/apps/block_scout_web/assets/js/pages/block.js @@ -4,7 +4,7 @@ import URI from 'urijs' import humps from 'humps' import socket from '../socket' import { updateAllAges } from '../lib/from_now' -import { buildFullBlockList, initRedux, slideDownBefore, skippedBlockListBuilder, clingBottom } from '../utils' +import { buildFullBlockList, initRedux, slideDownBefore, skippedBlockListBuilder } from '../utils' export const initialState = { blockNumbers: [], @@ -97,11 +97,9 @@ if ($blockListPage.length) { } else { if (skippedBlockNumbers.length) { _.forEachRight(skippedBlockNumbers, (skippedBlockNumber) => { - clingBottom() slideDownBefore($(`[data-block-number="${skippedBlockNumber - 1}"]`), placeHolderBlock(skippedBlockNumber)) }) } - clingBottom() slideDownBefore($(`[data-block-number="${state.blockNumbers[0] - 1}"]`), state.newBlock) } updateAllAges() diff --git a/apps/block_scout_web/assets/js/pages/transaction.js b/apps/block_scout_web/assets/js/pages/transaction.js index fa8f119c0e..beda3482c4 100644 --- a/apps/block_scout_web/assets/js/pages/transaction.js +++ b/apps/block_scout_web/assets/js/pages/transaction.js @@ -5,7 +5,7 @@ import humps from 'humps' import numeral from 'numeral' import socket from '../socket' import { updateAllAges } from '../lib/from_now' -import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils' +import { batchChannel, initRedux, slideDownPrepend, slideUpRemove } from '../utils' const BATCH_THRESHOLD = 10 @@ -171,15 +171,13 @@ if ($transactionPendingListPage.length) { if (oldState.newTransactionHashes !== state.newTransactionHashes && state.newTransactionHashes.length > 0) { const $transaction = $(`[data-transaction-hash="${state.newTransactionHashes[0]}"]`) $transaction.addClass('shrink-out') - setTimeout(() => $transaction.slideUp({ - complete: () => { - if ($pendingTransactionsList.children().length < 2 && state.pendingTransactionCount > 0) { - window.location.href = URI(window.location).removeQuery('inserted_at').removeQuery('hash').toString() - } else { - $transaction.remove() - } + setTimeout(() => { + if ($transaction.length === 1 && $transaction.siblings().length === 0 && state.pendingTransactionCount > 0) { + window.location.href = URI(window.location).removeQuery('inserted_at').removeQuery('hash').toString() + } else { + slideUpRemove($transaction) } - }), 400) + }, 400) } if (state.newPendingTransactionHashesBatch.length) { $channelBatching.show() @@ -189,7 +187,6 @@ if ($transactionPendingListPage.length) { } if (oldState.newPendingTransactions !== state.newPendingTransactions) { const newTransactionsToInsert = state.newPendingTransactions.slice(oldState.newPendingTransactions.length) - clingBottom() slideDownPrepend($pendingTransactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() @@ -231,7 +228,6 @@ if ($transactionListPage.length) { } if (oldState.newTransactions !== state.newTransactions) { const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length) - clingBottom() slideDownPrepend($transactionsList, newTransactionsToInsert.reverse().join('')) updateAllAges() diff --git a/apps/block_scout_web/assets/js/utils.js b/apps/block_scout_web/assets/js/utils.js index 5ebcb1af3b..ed69186d1c 100644 --- a/apps/block_scout_web/assets/js/utils.js +++ b/apps/block_scout_web/assets/js/utils.js @@ -45,54 +45,63 @@ export function skippedBlockListBuilder (skippedBlockNumbers, newestBlock, oldes return skippedBlockNumbers } -export function slideDownPrepend ($el, content) { - const $content = $(content) - $el.prepend($content.hide()) - return $content.slideDown() +export function slideDownPrepend ($container, content) { + smarterSlideDown($(content), { + insert ($el) { + $container.prepend($el) + } + }) +} +export function slideDownBefore ($container, content) { + smarterSlideDown($(content), { + insert ($el) { + $container.before($el) + } + }) } -export function slideDownBefore ($el, content) { - const $content = $(content) - $el.before($content.hide()) - return $content.slideDown() +export function slideUpRemove ($el) { + smarterSlideUp($el, { + complete () { + $el.remove() + } + }) } -let clingBottomLoop -export function clingBottom ($el, content) { - if (clingBottomLoop) window.cancelAnimationFrame(clingBottomLoop) +function smarterSlideDown ($el, { insert = _.noop } = {}) { + if (!$el.length) return + const originalScrollHeight = document.body.scrollHeight + const scrollPosition = window.scrollY - function userAtTop () { - return window.scrollY < $('[data-selector="navbar"]').outerHeight() - } - if (userAtTop()) return + insert($el) - let pageHeight = document.body.scrollHeight - let startingScrollPosition = window.scrollY - let endingScrollPosition = window.scrollY - function userIsScrolling () { - const pageHeightDiff = Math.abs(document.body.scrollHeight - pageHeight) - const minScrollPosition = _.min([ - startingScrollPosition, - endingScrollPosition - ]) - pageHeightDiff - const maxScrollPosition = _.max([ - startingScrollPosition, - endingScrollPosition - ]) + pageHeightDiff - return window.scrollY < minScrollPosition || maxScrollPosition < window.scrollY + const isAboveViewport = $el.offset().top < scrollPosition + + if (isAboveViewport) { + const heightDiffAfterInsert = document.body.scrollHeight - originalScrollHeight + const scrollPositionToMaintainViewport = scrollPosition + heightDiffAfterInsert + + $(window).scrollTop(scrollPositionToMaintainViewport) + } else { + $el.hide() + $el.slideDown({ easing: 'linear' }) } +} - const clingDistanceFromBottom = document.body.scrollHeight - window.scrollY - clingBottomLoop = window.requestAnimationFrame(function clingBottomFrame () { - if (userIsScrolling()) { - window.cancelAnimationFrame(clingBottomLoop) - clingBottomLoop = null - return - } +function smarterSlideUp ($el, { complete = _.noop } = {}) { + if (!$el.length) return + const originalScrollHeight = document.body.scrollHeight + const scrollPosition = window.scrollY + const isAboveViewport = $el.offset().top + $el.outerHeight(true) < scrollPosition - pageHeight = document.body.scrollHeight - startingScrollPosition = window.scrollY - endingScrollPosition = pageHeight - clingDistanceFromBottom - $(window).scrollTop(endingScrollPosition) - clingBottomLoop = window.requestAnimationFrame(clingBottomFrame) - }) + if (isAboveViewport) { + $el.hide() + + const heightDiffAfterHide = document.body.scrollHeight - originalScrollHeight + const scrollPositionToMaintainViewport = scrollPosition + heightDiffAfterHide + + $(window).scrollTop(scrollPositionToMaintainViewport) + complete() + } else { + $el.slideUp({ complete, easing: 'linear' }) + } } From d9640e18ec67bf6796daad3859dd5e97166fff2a Mon Sep 17 00:00:00 2001 From: jimmay5469 Date: Thu, 18 Oct 2018 11:04:45 -0400 Subject: [PATCH 12/16] Display "0 tokens" to avoid height glitch --- .../assets/js/lib/token_balance_dropdown.js | 2 -- .../templates/address/_balance_card.html.eex | 10 +++++----- .../address_token_balance/_token_balances.html.eex | 2 ++ 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/block_scout_web/assets/js/lib/token_balance_dropdown.js b/apps/block_scout_web/assets/js/lib/token_balance_dropdown.js index ff763df87c..3fac9f8ae8 100644 --- a/apps/block_scout_web/assets/js/lib/token_balance_dropdown.js +++ b/apps/block_scout_web/assets/js/lib/token_balance_dropdown.js @@ -6,8 +6,6 @@ const tokenBalanceDropdown = (element) => { const $errorMessage = $element.find('[data-error-message]') const apiPath = element.dataset.api_path - $loading.show() - $.get(apiPath) .done(response => $element.html(response)) .fail(() => { diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex index a2c85c5e20..e9ac3efa55 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/_balance_card.html.eex @@ -10,14 +10,14 @@
-
+ <%= gettext("Fetching tokens...") %> -

+
-
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex index 6551497b48..e2ac38b8a4 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_token_balances.html.eex @@ -12,6 +12,8 @@
<%= tokens_count_title(@token_balances) %>
+<% else %> +
<%= tokens_count_title(@token_balances) %>
<% end %>