Stamates
6 years ago
committed by
jimmay5469
parent
f7852e7eb7
commit
d3f8e6a157
@ -0,0 +1,60 @@ |
||||
import $ from 'jquery' |
||||
import humps from 'humps' |
||||
import socket from '../socket' |
||||
import router from '../router' |
||||
import { updateAllAges } from '../lib/from_now' |
||||
import { initRedux } from '../utils' |
||||
|
||||
export const initialState = { |
||||
beyondPageOne: null, |
||||
channelDisconnected: false, |
||||
newBlock: null |
||||
} |
||||
|
||||
export function reducer (state = initialState, action) { |
||||
switch (action.type) { |
||||
case 'PAGE_LOAD': { |
||||
return Object.assign({}, state, { |
||||
beyondPageOne: !!action.blockNumber |
||||
}) |
||||
} |
||||
case 'CHANNEL_DISCONNECTED': { |
||||
if (state.beyondPageOne) return state |
||||
|
||||
return Object.assign({}, state, { |
||||
channelDisconnected: true |
||||
}) |
||||
} |
||||
case 'RECEIVED_NEW_BLOCK': { |
||||
if (state.channelDisconnected || state.beyondPageOne) return state |
||||
|
||||
return Object.assign({}, state, { |
||||
newBlock: action.msg.blockHtml |
||||
}) |
||||
} |
||||
default: |
||||
return state |
||||
} |
||||
} |
||||
|
||||
router.when('/blocks', { exactPathMatch: true }).then(({ blockNumber }) => initRedux(reducer, { |
||||
main (store) { |
||||
const blocksChannel = socket.channel(`blocks:new_block`, {}) |
||||
store.dispatch({ type: 'PAGE_LOAD', blockNumber }) |
||||
blocksChannel.join() |
||||
blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' })) |
||||
blocksChannel.on('new_block', (msg) => |
||||
store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) }) |
||||
) |
||||
}, |
||||
render (state, oldState) { |
||||
const $channelDisconnected = $('[data-selector="channel-disconnected-message"]') |
||||
const $blocksList = $('[data-selector="blocks-list"]') |
||||
|
||||
if (state.channelDisconnected) $channelDisconnected.show() |
||||
if (oldState.newBlock !== state.newBlock) { |
||||
$blocksList.prepend(state.newBlock) |
||||
updateAllAges() |
||||
} |
||||
} |
||||
})) |
||||
@ -0,0 +1,48 @@ |
||||
<div class="tile"> |
||||
<div class="row"> |
||||
<div class="col-md-6"> |
||||
<!-- block height --> |
||||
<%= link( |
||||
@block, |
||||
class: "tile-title", |
||||
to: block_path(ExplorerWeb.Endpoint, :show, @locale, @block), |
||||
"data-test": "block_number", |
||||
"data-block-number": to_string(@block.number) |
||||
) %> |
||||
<div> |
||||
<!-- transactions --> |
||||
<span class="mr-2"> |
||||
<%= ngettext("%{count} transaction", "%{count} transactions", Enum.count(@block.transactions)) %> |
||||
</span> |
||||
<!-- size --> |
||||
<span class="mr-2"> <%= Cldr.Unit.new(:byte, @block.size) |> Cldr.Unit.to_string! %> </span> |
||||
<!-- age --> |
||||
<span data-from-now="<%= @block.timestamp %>"></span> |
||||
</div> |
||||
<div class=""> |
||||
<!-- validator --> |
||||
<%= gettext "Miner" %> |
||||
<span class="ml-2"> |
||||
<%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner_hash) do %> |
||||
<%= @block.miner_hash %> |
||||
<% end %> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="col-md-6 text-right d-flex flex-column align-items-end justify-content-end"> |
||||
<!-- Gas Used --> |
||||
<div class=""> |
||||
<%= formatted_gas(@block.gas_used) %> |
||||
(<%= formatted_gas(@block.gas_used / @block.gas_limit, format: "#.#%") %>) |
||||
<%= gettext "Gas Used" %> |
||||
</div> |
||||
<div class="progress w-25"> |
||||
<div class="progress-bar" role="progressbar" style="width: <%= formatted_gas(@block.gas_used / @block.gas_limit, format: "#.#%") %>;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> |
||||
|
||||
</div> |
||||
</div> |
||||
<!-- Gas Limit --> |
||||
<span> <%= formatted_gas(@block.gas_limit) %> <%= gettext "Gas Limit" %> </span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue