diff --git a/web/explorer/explorer-server/code/txs.js b/web/explorer/explorer-server/code/txs.js
index 8aa877b8b..12b3f3864 100644
--- a/web/explorer/explorer-server/code/txs.js
+++ b/web/explorer/explorer-server/code/txs.js
@@ -1,221 +1,221 @@
const renderHash = data => {
let minifiedHash = minifyBlockID(data.txHash);
if (data.blockHeight === 0) {
return (
'' +
minifiedHash +
''
);
} else {
return '' + minifiedHash + '';
}
};
var today = Date.now() / 1000;
var fiveYearsAgo = today - 157800000;
var xecDate = 1605441600;
var bchDate = 1502193600;
const renderSize = size => formatByteSize(size);
const renderInput = data => {
const txDate = data.timestamp;
let xecIcon = '';
let bchIcon = '';
let fiveIcon = '';
if (txDate < xecDate) {
xecIcon =
'
Pre-XEC
(Nov 15, 2020) ';
}
if (txDate < bchDate) {
bchIcon =
'Pre-BCH
(Aug 8, 2017) ';
}
if (txDate < fiveYearsAgo) {
fiveIcon =
'Over Five
Years Old ';
}
return (
'' +
xecIcon +
fiveIcon +
bchIcon +
`
${data.numInputs}
`
);
};
const renderOutput = (satsOutput, _type, row) => {
if (row.token) {
var ticker =
'';
return renderAmount(row.stats.tokenOutput, row.token.decimals) + ticker;
}
return (
'' +
renderSats(row.stats.satsOutput) +
'
'
);
};
const updateLoading = status => {
if (status) {
$('#txs-table > tbody').addClass('blur');
$('.loader__container--fullpage').removeClass('hidden');
$('#pagination').addClass('hidden');
$('#footer').addClass('hidden');
} else {
$('#txs-table > tbody').removeClass('blur');
$('.loader__container--fullpage').addClass('hidden');
$('#pagination').removeClass('hidden');
$('#footer').removeClass('hidden');
}
};
// UI actions
const goToPage = (event, page) => {
event.preventDefault();
reRenderPage({ page });
};
// UI presentation elements
const datatable = () => {
const blockHash = $('#block-hash').text();
$('#txs-table').DataTable({
searching: false,
- lengthMenu: [50, 100, 250, 500, 1000],
+ lengthMenu: [25, 50, 100, 200],
pageLength: DEFAULT_ROWS_PER_PAGE,
language: {
loadingRecords: '',
zeroRecords: '',
emptyTable: '',
},
ajax: `/api/block/${blockHash}/transactions`,
order: [],
responsive: {
details: {
type: 'column',
target: -1,
},
},
columnDefs: [
{
className: 'dtr-control',
orderable: false,
targets: -1,
},
],
columns: [
{
data: { txHash: 'txHash', blockHeight: 'blockHeight' },
title: 'ID',
className: 'hash',
render: renderHash,
orderable: false,
},
{
data: 'size',
title: 'Size',
render: renderSize,
className: 'text-right',
orderSequence: ['desc', 'asc'],
type: 'file-size',
targets: 0,
},
{
name: 'fee',
title: 'Fee',
css: 'fee',
render: renderFee,
className: 'text-right',
orderSequence: ['desc', 'asc'],
type: 'html-num-fmt',
},
{
data: { numInputs: 'numInputs' },
title: 'Inputs',
className: 'text-right',
render: renderInput,
orderSequence: ['desc', 'asc'],
},
{
data: 'numOutputs',
title: 'Outputs',
className: 'text-right',
orderSequence: ['desc', 'asc'],
},
{
data: 'satsOutput',
title: 'Output Amount',
render: renderOutput,
className: 'text-right',
orderSequence: ['desc', 'asc'],
},
{ name: 'responsive', render: () => '' },
],
});
params = window.state.getParameters();
$('#txs-table').dataTable().api().page.len(params.rows);
};
// events
$(window).resize(() => {
const { currentPage, pageArray } =
window.pagination.generatePaginationUIParams();
window.pagination.generatePaginationUI(currentPage, pageArray);
$('#blocks-table').DataTable().responsive.rebuild();
$('#blocks-table').DataTable().responsive.recalc();
});
$('#txs-table').on('init.dt', () => {
$('.datatable__length-placeholder').remove();
});
$('#txs-table').on('length.dt', (e, settings, rows) => {
params = window.state.getParameters();
if (params.rows !== rows) {
reRenderPage({ rows });
}
});
$('#txs-table').on('xhr.dt', () => {
updateLoading(false);
});
// Basically a fake refresh, dynamically updates everything
// according to new params
// updates: URL, table and pagination
const reRenderPage = params => {
if (params) {
window.state.updateParameters(params);
if (params.page) {
// DataTable pages start at index 0, so we oblige
$('#txs-table')
.DataTable()
.page(params.page - 1)
.draw(false);
}
}
const { currentPage, pageArray } =
window.pagination.generatePaginationUIParams();
window.pagination.generatePaginationUI(currentPage, pageArray);
};
// main
$(document).ready(() => {
// init all UI elements
datatable();
// global state update
reRenderPage();
});