diff --git a/apps/explorer_web/assets/js/lib/from_now.js b/apps/explorer_web/assets/js/lib/from_now.js index ff32a8102b..5c3135e002 100644 --- a/apps/explorer_web/assets/js/lib/from_now.js +++ b/apps/explorer_web/assets/js/lib/from_now.js @@ -1,7 +1,8 @@ import $ from 'jquery' import moment from 'moment' +import router from '../router' -moment.locale(window.locale) +moment.locale(router.locale) moment.relativeTimeThreshold('M', 12) moment.relativeTimeThreshold('d', 30) diff --git a/apps/explorer_web/assets/js/pages/address.js b/apps/explorer_web/assets/js/pages/address.js index cec875652e..f7cf3db7e7 100644 --- a/apps/explorer_web/assets/js/pages/address.js +++ b/apps/explorer_web/assets/js/pages/address.js @@ -1,16 +1,15 @@ import $ from 'jquery' -import URI from 'urijs' import humps from 'humps' import socket from '../socket' +import router from '../router' -if (window.page === 'address') { - const channel = socket.channel(`addresses:${window.addressHash}`, {}) +router.when('/addresses/:addressHash').then(({ addressHash, blockNumber, filter }) => { + const channel = socket.channel(`addresses:${addressHash}`, {}) channel.join() - .receive('ok', resp => { console.log('Joined successfully', `addresses:${window.addressHash}`, resp) }) - .receive('error', resp => { console.log('Unable to join', `addresses:${window.addressHash}`, resp) }) + .receive('ok', resp => { console.log('Joined successfully', `addresses:${addressHash}`, resp) }) + .receive('error', resp => { console.log('Unable to join', `addresses:${addressHash}`, resp) }) - const currentLocation = URI(window.location) - if(!currentLocation.hasQuery('block_number')) { + if (!blockNumber) { const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]') if ($emptyTransactionsList) { channel.on('transaction', () => { @@ -27,15 +26,15 @@ if (window.page === 'address') { transactionHtml } = humps.camelizeKeys(msg) - if(currentLocation.query(true).filter === 'to' && toAddressHash !== window.addressHash) { - return; + if (filter === 'to' && toAddressHash !== addressHash) { + return } - if(currentLocation.query(true).filter === 'from' && fromAddressHash !== window.addressHash) { - return; + if (filter === 'from' && fromAddressHash !== addressHash) { + return } $transactionsList.prepend(transactionHtml) }) } } -} +}) diff --git a/apps/explorer_web/assets/js/router.js b/apps/explorer_web/assets/js/router.js new file mode 100644 index 0000000000..87a16a5352 --- /dev/null +++ b/apps/explorer_web/assets/js/router.js @@ -0,0 +1,19 @@ +import Path from 'path-parser' +import URI from 'urijs' +import humps from 'humps' + +const { locale } = Path.createPath('/:locale').partialTest(window.location.pathname) + +export default { + locale, + when (pattern) { + return new Promise((resolve) => { + const match = Path.createPath(`/:locale${pattern}`).partialTest(window.location.pathname) + if (match) { + const routeParams = humps.camelizeKeys(match) + const queryParams = humps.camelizeKeys(URI(window.location).query(true)) + resolve(Object.assign({}, queryParams, routeParams)) + } + }) + } +} diff --git a/apps/explorer_web/assets/js/socket.js b/apps/explorer_web/assets/js/socket.js index bd6675629f..67c43eab9e 100644 --- a/apps/explorer_web/assets/js/socket.js +++ b/apps/explorer_web/assets/js/socket.js @@ -1,6 +1,7 @@ import {Socket} from 'phoenix' +import router from './router' -const socket = new Socket('/socket', {params: {locale: window.locale}}) +const socket = new Socket('/socket', {params: {locale: router.locale}}) socket.connect() export default socket diff --git a/apps/explorer_web/assets/package-lock.json b/apps/explorer_web/assets/package-lock.json index cf5d0bca91..1631cc3879 100644 --- a/apps/explorer_web/assets/package-lock.json +++ b/apps/explorer_web/assets/package-lock.json @@ -5642,6 +5642,14 @@ "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", "dev": true }, + "path-parser": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/path-parser/-/path-parser-4.1.1.tgz", + "integrity": "sha512-Wa8H3oVxnt8U5qODVpwg/fZgxFgJADywGqyAsMB6NkiLoc+Up+ryZ9r9/wyL026VDy+GCmF3d5BhfPFFKllOlQ==", + "requires": { + "search-params": "2.1.3" + } + }, "path-type": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", @@ -7187,6 +7195,11 @@ } } }, + "search-params": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/search-params/-/search-params-2.1.3.tgz", + "integrity": "sha512-hHxU9ZGWpZ/lrFBIHndSnQae2in7ra+m+tBSoeAahSWDDgOgpZqs4bfaTZpljgNgAgTbjiQoJtZW6FKSsfEcDA==" + }, "select": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", diff --git a/apps/explorer_web/assets/package.json b/apps/explorer_web/assets/package.json index 2aba6cb072..273917e386 100644 --- a/apps/explorer_web/assets/package.json +++ b/apps/explorer_web/assets/package.json @@ -26,6 +26,7 @@ "jquery": "^3.3.1", "moment": "^2.22.1", "numeral": "^2.0.6", + "path-parser": "^4.1.1", "phoenix": "file:../../../deps/phoenix", "phoenix_html": "file:../../../deps/phoenix_html", "popper.js": "^1.14.3", diff --git a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex index dcbc5e023d..a2b14557bb 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex @@ -1,8 +1,3 @@ - -
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex index 8f664a0657..4ae2bd1534 100644 --- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex @@ -6,9 +6,6 @@ <%= gettext "POA Network Explorer" %> "> -