diff --git a/src/App.js b/src/App.js index 83f9956..70b9abc 100644 --- a/src/App.js +++ b/src/App.js @@ -15,46 +15,40 @@ import Info from './Pages/Info'; class WitnetExplorer extends React.Component{ render(){ return( -
-
-
- - - - - Witnet Explorer - - - - - - -
- - - - - - - - - - - - - -
-
-
+ + + + + Witnet Explorer + + + + + + +
+ + + + + + + + + + + + + ) } } diff --git a/src/Components/Paginator.js b/src/Components/Paginator.js index 80dee35..1ec713f 100644 --- a/src/Components/Paginator.js +++ b/src/Components/Paginator.js @@ -78,7 +78,7 @@ class Paginator extends Component { } return ( - + this.setPage(1)} disabled={paginator.current_page === 1}> {"<<"} diff --git a/src/Pages/Home.js b/src/Pages/Home.js index e45e094..d9b4306 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -78,7 +78,7 @@ export default class Home extends Component{ ]; return ( - +
{ table_rows.map(function(table_row) { @@ -87,11 +87,12 @@ export default class Home extends Component{ var value = table_row[2]; return ( - - + - + @@ -113,7 +114,7 @@ export default class Home extends Component{ ]; return ( -
- {label} +
+ + {label} {Formatter.formatValue(value)}
+
{ table_rows.map(function(table_row) { @@ -122,11 +123,14 @@ export default class Home extends Component{ var value = table_row[2]; return ( - - + - + @@ -140,27 +144,27 @@ export default class Home extends Component{ generateLatestBlocks(blocks) { return ( -
- {label} +
+ + + {label} + {Formatter.formatValueSuffix(value, 2)}
+
{ blocks.slice(0, this.state.rows_per_card).map(function(block) { var block_link = "/search/" + block.hash; return ( - - + - - - @@ -174,22 +178,22 @@ export default class Home extends Component{ generateTransactionCard(transactions, icon) { return ( -
- +
+ {block.hash} - + + {block.data_request} - + + {block.value_transfer} + {TimeConverter.convertUnixTimestamp(block.timestamp, "hour")}
+
{ transactions.slice(0, this.state.rows_per_card).map(function(transaction) { var hash_link = "/search/" + transaction.hash; return ( - - + - - - - - -
- Network stats -
- - + + +
+ +
+ Network stats +
+ {this.network_stats_card} - - -
- Supply info -
- - + +
+ Supply info +
+ {this.supply_stats_card} - +
- - + + Last updated: {update_timestamp} - - + +
Blocks
- - {this.latest_blocks_card} - + {this.latest_blocks_card} - - + + Last updated: {update_timestamp} - - + +
Data requests
- - {this.latest_data_requests_card} - + {this.latest_data_requests_card} - - + + Last updated: {update_timestamp} - - + +
Value transfers
- - {this.latest_value_transfers_card} - + {this.latest_value_transfers_card} - - + + Last updated: {update_timestamp} diff --git a/src/Pages/Reputation.js b/src/Pages/Reputation.js index 92dfa32..3e63ffe 100644 --- a/src/Pages/Reputation.js +++ b/src/Pages/Reputation.js @@ -58,14 +58,14 @@ export default class Reputation extends Component{ var reputation_link = {reputation.address} return ( - - + - - @@ -86,34 +86,35 @@ export default class Reputation extends Component{ var row_stop = this.state.current_page * this.state.rows_per_page; return ( - - - -
- +
+ {transaction.hash} + {TimeConverter.convertUnixTimestamp(transaction.timestamp, "hour")} + { transaction.confirmed ? @@ -213,84 +217,76 @@ export default class Home extends Component{
+
{reputation_link} + {reputation.reputation} + {reputation.eligibility.toFixed(4) + "%"}
- - - - - - - - - {this.state.reputation_rows.slice(row_start, row_stop)} - -
- {"Addresses " + (row_start + 1) + " to " + row_stop} - - {"Reputation"} - - {"Eligibility"} -
- + + + + + + + + + + + + + {this.state.reputation_rows.slice(row_start, row_stop)} + +
+ {"Addresses " + (row_start + 1) + " to " + row_stop} + + {"Reputation"} + + {"Eligibility"} +
+
+ +
- - + + Last updated: {this.state.last_updated} - ); @@ -178,8 +179,8 @@ export default class Reputation extends Component{ {this.reputation_chart} {this.eligibility_chart} - - Last updated: {this.state.last_updated} + + Last updated: {this.state.last_updated} ); @@ -189,7 +190,7 @@ export default class Reputation extends Component{ this.setState({ window_width: window.innerWidth, window_height: window.innerHeight, - rows_per_page: Math.floor(window.innerHeight * 0.7 / 20) + rows_per_page: Math.floor(window.innerHeight * 0.7 / 25) }); } diff --git a/src/Pages/SearchPages/BlockPanel.js b/src/Pages/SearchPages/BlockPanel.js index 242a940..16cb988 100644 --- a/src/Pages/SearchPages/BlockPanel.js +++ b/src/Pages/SearchPages/BlockPanel.js @@ -11,66 +11,73 @@ export default class BlockPanel extends Component { var block_link = "/search/" + data.hash; var miner_link = "/search/" + miner; return ( - - +
- - + - - + - - + - + - - - + - - + - - + - + - + */}
- {"Block"} + + + {"Block"} {data.hash} - {"Data request weight"} + + + {"Data request weight"} {data.data_request_weight}
- {"Time"} + + + {"Time"} {TimeConverter.convertUnixTimestamp(data.timestamp, "full") + " (epoch: " + data.epoch + ")"} - {"Value transfer weight"} + + + + {"Value transfer weight"} + {data.value_transfer_weight}
- {"Miner"} + + + {"Miner"} {miner} - {"Block weight"} + + + {"Block weight"} {data.weight}
- {"Status"} + {/*
+ + {"Status"} { data.confirmed ? "Confirmed" : "Mined" }
- ); } @@ -493,9 +500,7 @@ export default class BlockPanel extends Component { - - {this.generateDetailsCard(data.details, data.transactions.mint.miner)} - + {this.generateDetailsCard(data.details, data.transactions.mint.miner)} diff --git a/src/Pages/SearchPages/DataRequestPages/DataRequest.js b/src/Pages/SearchPages/DataRequestPages/DataRequest.js index b0fbf01..565d40a 100644 --- a/src/Pages/SearchPages/DataRequestPages/DataRequest.js +++ b/src/Pages/SearchPages/DataRequestPages/DataRequest.js @@ -15,37 +15,41 @@ export default class DataRequest extends Component { var RAD_hash_link = "/search/" + transaction.RAD_bytes_hash; var block_link = "/search/" + transaction.block; return ( - +
- - + - + - - + - + - - + - + - - + - + @@ -54,11 +58,12 @@ export default class DataRequest extends Component { var address_link = "/search/" + address; if (idx === 0) { return ( - - + - + @@ -66,9 +71,8 @@ export default class DataRequest extends Component { } else { return ( - - - + @@ -76,19 +80,21 @@ export default class DataRequest extends Component { } }) } - - + - + - - + - + -
- {"Transaction"} +
+ + {"Transaction"} {transaction.hash}
- {"DRO hash"} +
+ + {"DRO hash"} {transaction.DRO_bytes_hash}
- {"RAD hash"} +
+ + {"RAD hash"} {transaction.RAD_bytes_hash}
- {"Block"} +
+ + {"Block"} {transaction.block}
- {"Addresses"} +
+ + {"Addresses"} {address}
+
{address}
- {"Timestamp"} +
+ + {"Timestamp"} {TimeConverter.convertUnixTimestamp(transaction.timestamp, "full") + " (epoch: " + transaction.epoch + ")"}
- {"Status"} +
+ + {"Status"} { transaction.confirmed ? "Confirmed" @@ -96,7 +102,6 @@ export default class DataRequest extends Component { }
); @@ -104,61 +109,68 @@ export default class DataRequest extends Component { generateDataRequestCard(data_request) { return ( - +
- - + - + - - + - + - - + - + - - + - + - - + - + - - + - + - - + - + @@ -174,18 +186,14 @@ export default class DataRequest extends Component { - - {this.generateTransactionCard(this.props.data)} - + {this.generateTransactionCard(this.props.data)} - - {this.generateDataRequestCard(this.props.data)} - + {this.generateDataRequestCard(this.props.data)} diff --git a/src/Pages/SearchPages/ValueTransferPanel.js b/src/Pages/SearchPages/ValueTransferPanel.js index 32bc2ec..4790e9e 100644 --- a/src/Pages/SearchPages/ValueTransferPanel.js +++ b/src/Pages/SearchPages/ValueTransferPanel.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { Link } from "react-router-dom"; -import { Card, Container, Form } from "react-bootstrap"; +import { Card, Container, Form, Table } from "react-bootstrap"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Formatter from "../../Services/Formatter"; @@ -31,29 +31,32 @@ export default class ValueTransferPanel extends Component { } return ( -
- {"Witnesses"} +
+ + {"Witnesses"} {data_request.witnesses}
- {"Reward"} +
+ + {"Reward"} {Formatter.formatWitValue(data_request.witness_reward, 2)}
- {"Collateral"} +
+ + {"Collateral"} {Formatter.formatWitValue(data_request.collateral, 2)}
- {"Consensus"} +
+ + {"Consensus"} {data_request.consensus_percentage + "%"}
- {"Miner fee"} +
+ + {"Miner fee"} {Formatter.formatWitValue(data_request.miner_fee, 2)}
- {"Priority"} +
+ + {"Priority"} {Formatter.formatValueReducingDecimals(data_request.priority, 3)}
- {"Weight"} +
+ + {"Weight"} {Formatter.formatValue(data_request.weight, 0)}
+
- - + - - + - - + - - + - - + - - + - - + -
- {"Transaction"} + + + {"Transaction"} {transaction.hash}
- {"Block"} + + + {"Block"} {transaction.block}
- {"Fee"} + + + {"Fee"} { this.state.showNanoWitValues ? Formatter.formatValue(transaction.fee) + " nWIT" @@ -62,34 +65,38 @@ export default class ValueTransferPanel extends Component {
- {"Weight"} + + + {"Weight"} {Formatter.formatValue(transaction.weight, 0)}
- {"Priority"} + + + {"Priority"} {Formatter.formatValue(transaction.priority, 0)}
- {"Timestamp"} + + + {"Timestamp"} {transaction_time}
- {"Status"} + + + {"Status"} { transaction.confirmed ? "Confirmed" @@ -98,13 +105,13 @@ export default class ValueTransferPanel extends Component {
+ ); } generateInputOutputAddresses(data, showNanoWitValues) { return ( - +
+ @@ -215,7 +222,7 @@ export default class ValueTransferPanel extends Component { }) } -
{input.address}
+ ); } @@ -371,7 +378,7 @@ export default class ValueTransferPanel extends Component { generateUtxoCheck() { return ( -
+ - - { this.generateDetailsCard(this.props.data) } @@ -422,8 +427,6 @@ export default class ValueTransferPanel extends Component { { this.generateNanoWitValuesCheck() } - - diff --git a/src/stylesheet.css b/src/stylesheet.css index 4960183..020c700 100644 --- a/src/stylesheet.css +++ b/src/stylesheet.css @@ -6,9 +6,8 @@ } html, body { - overflow-y: hidden; - overflow-x: hidden; font-family: "courier-prime-v1-latin-regular"; + overscroll-behavior: none; } body { @@ -166,21 +165,6 @@ body { background: #ffffff; } -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-thumb { - background: rgba(0,0,0,0.2); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(0,0,0,0.3); - border-radius: 10px; -} - .flex-container { box-sizing: border-box; display: flex; @@ -192,3 +176,69 @@ body { width: 100%; image-rendering: pixelated; } + +.card-section-spacer { + margin-top: 1rem; +} + +.card-bottom-info { + margin: 0rem 0.75rem 0.25rem 0.75rem; + padding-bottom: 0.5rem; + opacity: 0.8; + +} + +/* Table custom style */ + +.custom-td { + border: none; + white-space: nowrap; + min-width: 25%; +} +.custom-td:last-child { + width: 100%; + text-align: right; + padding-right: 0rem; +} +.table { + margin-bottom: 0px; +} +.table-responsive { + height: max-content; + max-height: 93%; +} +.table>:not(caption)>*>* { + padding: 0.15rem 0.25rem; + padding-right: 1rem; +} +.td-icon { + margin-right: 0.5rem; +} + +/* Home Cards Layout */ + +.home-card { + height: 70vh; +} +.home-card>.card-body { + height: 0%; +} +.home-table { + height: max-content; + max-height: 100%; +} +.home-table>tbody { + height: max-content; + max-height: 93%; +} +.card-body { + height: max-content; + max-height: 100%; + overflow-x: auto; +} + +@media (max-width: 700px) { + .home-card { + height: max-content; + } +}