mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 02:35:09 +02:00
Slight interface update
This commit is contained in:
parent
695c534d22
commit
3a2ed2e951
0
src/eventViewer.js
Normal file
0
src/eventViewer.js
Normal file
@ -51,12 +51,12 @@ class Livepeer extends React.Component {
|
||||
let ethPriceChange24h = 0;
|
||||
if (this.props.livepeer.quotes) {
|
||||
if (this.props.livepeer.quotes.LPT) {
|
||||
lptPrice = this.props.livepeer.quotes.LPT.price;
|
||||
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h;
|
||||
lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
|
||||
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
||||
}
|
||||
if (this.props.livepeer.quotes.ETH) {
|
||||
ethPrice = this.props.livepeer.quotes.ETH.price;
|
||||
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h;
|
||||
ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
|
||||
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,29 +93,29 @@ class Livepeer extends React.Component {
|
||||
let withdrawFeeCostL2USD;
|
||||
if (l1GasFeeInGwei && ethPrice) {
|
||||
if (redeemRewardCostL1) {
|
||||
redeemRewardCostL1USD = redeemRewardCostL1 * ethPrice;
|
||||
redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
|
||||
}
|
||||
if (claimTicketCostL1) {
|
||||
claimTicketCostL1USD = claimTicketCostL1 * ethPrice;
|
||||
claimTicketCostL1USD = (claimTicketCostL1 * ethPrice).toFixed(2);
|
||||
}
|
||||
if (withdrawFeeCostL1) {
|
||||
withdrawFeeCostL1USD = withdrawFeeCostL1 * ethPrice;
|
||||
withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
|
||||
}
|
||||
}
|
||||
if (l2GasFeeInGwei && ethPrice) {
|
||||
if (redeemRewardCostL2) {
|
||||
redeemRewardCostL2USD = redeemRewardCostL2 * ethPrice;
|
||||
redeemRewardCostL2USD = (redeemRewardCostL2 * ethPrice).toFixed(2);
|
||||
}
|
||||
if (claimTicketCostL2) {
|
||||
claimTicketCostL2USD = claimTicketCostL2 * ethPrice;
|
||||
claimTicketCostL2USD = (claimTicketCostL2 * ethPrice).toFixed(2);
|
||||
}
|
||||
if (withdrawFeeCostL2) {
|
||||
withdrawFeeCostL2USD = withdrawFeeCostL2 * ethPrice;
|
||||
withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
let eventsList = [];
|
||||
if (this.props.livepeer.events){
|
||||
if (this.props.livepeer.events) {
|
||||
eventsList = this.props.livepeer.events;
|
||||
}
|
||||
|
||||
@ -132,12 +132,12 @@ class Livepeer extends React.Component {
|
||||
<img alt="" src="livepeer.png" width="100em" height="100em" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="roundedOpaque" style={{ padding: 0, width: 'unset' }}>
|
||||
<div className="roundedOpaque flexContainer hostinfo scrollWindow" style={{ width: 'unset', justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginBottom: '20px', marginTop: '20px', flexDirection: 'column' }}>
|
||||
{eventsList.map((eventObj, idx) => {
|
||||
console.log(eventObj);
|
||||
// TODO: make something that groups shit as long as the eventObj.transactionUrl is the same
|
||||
return <EventButton
|
||||
key={eventObj.transactionUrl+idx}
|
||||
key={eventObj.transactionUrl + idx}
|
||||
transactionUrl={eventObj.transactionUrl}
|
||||
transactionHash={eventObj.transactionHash}
|
||||
name={eventObj.name}
|
||||
@ -152,24 +152,46 @@ class Livepeer extends React.Component {
|
||||
<div className="main-container">
|
||||
<div className="content-wrapper">
|
||||
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
||||
<div className="overflow-content roundedOpaque" style={{ cursor: 'grab' }}>
|
||||
<h3>Price Info</h3>
|
||||
<h4>Current LPT price: {lptPrice}</h4>
|
||||
<h4>Current LPT price change: {lptPriceChange24h}%</h4>
|
||||
<h4>Current ETH price: {ethPrice}</h4>
|
||||
<h4>Current ETH price change: {ethPriceChange24h}%</h4>
|
||||
<h3>Cost Info</h3>
|
||||
<h5>Last updated @ {blockchainTime}</h5>
|
||||
<h4>Current layer 1 gas fee in GWEI: {l1GasFeeInGwei}</h4>
|
||||
<h4>Current layer 1 is at block: {l1Block}</h4>
|
||||
<h4>Current layer 1 cost to redeem daily reward: {redeemRewardCostL1} eth = ${redeemRewardCostL1USD}</h4>
|
||||
<h4>Current layer 1 cost to claim a winning ticket: {claimTicketCostL1} eth = ${claimTicketCostL1USD}</h4>
|
||||
<h4>Current layer 1 cost to withdraw Eth fees: {withdrawFeeCostL1} eth = ${withdrawFeeCostL1USD}</h4>
|
||||
<h4>Current layer 2 gas fee in GWEI: {l2GasFeeInGwei}</h4>
|
||||
<h4>Current layer 2 is at block: {l2Block}</h4>
|
||||
<h4>Current layer 2 cost to redeem daily reward: {redeemRewardCostL2} eth = ${redeemRewardCostL2USD}</h4>
|
||||
<h4>Current layer 2 cost to claim a winning ticket: {claimTicketCostL2} eth = ${claimTicketCostL2USD}</h4>
|
||||
<h4>Current layer 2 cost to withdraw Eth fees: {withdrawFeeCostL2} eth = ${withdrawFeeCostL2USD}</h4>
|
||||
<div className="overflow-content metaSidebar" style={{ cursor: 'grab' }}>
|
||||
<div className="row">
|
||||
<h3>Price Info</h3>
|
||||
</div>
|
||||
<div className="row">
|
||||
<img alt="" src="livepeer.png" width="30" height="30" />
|
||||
<p style={{ flex: 1 }}>${lptPrice}</p>
|
||||
<p style={{ flex: 1 }}>({lptPriceChange24h}%)</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<img alt="" src="eth.png" width="30" height="30" />
|
||||
<p style={{ flex: 1 }}>${ethPrice}</p>
|
||||
<p style={{ flex: 1 }}>({ethPriceChange24h}%)</p>
|
||||
</div>
|
||||
<h3>Smart contract prices L2</h3>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Reward Call:</p>
|
||||
<p style={{ flex: 1 }}>${redeemRewardCostL2USD}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Claim Ticket:</p>
|
||||
<p style={{ flex: 1 }}>${claimTicketCostL2USD}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Withdraw Fees:</p>
|
||||
<p style={{ flex: 1 }}>${withdrawFeeCostL2USD}</p>
|
||||
</div>
|
||||
<h3>Smart contract prices L1</h3>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Reward Call:</p>
|
||||
<p style={{ flex: 1 }}>${redeemRewardCostL1USD}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Claim Ticket:</p>
|
||||
<p style={{ flex: 1 }}>${claimTicketCostL1USD}</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p style={{ flex: 1 }}>Withdraw Fees:</p>
|
||||
<p style={{ flex: 1 }}>${withdrawFeeCostL1USD}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
|
||||
@ -126,6 +126,27 @@ svg {
|
||||
from { top: 0; } to { top: calc(100vh - 69px); }
|
||||
}
|
||||
|
||||
.scrollWindow {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: calc(50vw);
|
||||
height: calc((9 / 16 ) * 50vw);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.metaSidebar {
|
||||
background-color: rgba(180, 175, 252, 0.80);
|
||||
box-shadow: 9px 13px 18px 8px rgba(8, 7, 56, 0.692);
|
||||
border-radius: 30px;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(6px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.serviceButton {
|
||||
width: 100%;
|
||||
margin: 0.4em;
|
||||
@ -207,6 +228,19 @@ svg {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.strokeSmoll {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
paddin: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
@ -418,18 +452,6 @@ svg {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.mistvideo {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: calc(50vw);
|
||||
height: calc((9 / 16 ) * 50vw);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border:none;
|
||||
border-top:25px dotted rgba(56, 19, 124, 0.6);
|
||||
@ -438,17 +460,6 @@ svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mistvideo-controls svg.mist.icon:hover .fill,
|
||||
.mistvideo-controls svg.mist.icon:hover .semiFill,
|
||||
.mistvideo-volume_container:hover .fill,
|
||||
.mistvideo-volume_container:hover .semiFill {
|
||||
fill: rgba(179, 14, 14, 0.875);
|
||||
}
|
||||
.mistvideo-controls svg.mist.icon:hover .stroke,
|
||||
.mistvideo-volume_container:hover .stroke {
|
||||
stroke: rgba(179, 14, 14, 0.875);
|
||||
}
|
||||
|
||||
.markdown {
|
||||
padding: 50px;
|
||||
width: 50vw;
|
||||
@ -495,6 +506,10 @@ svg {
|
||||
|
||||
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.scrollWindow {
|
||||
width: calc(100vw - 20px);
|
||||
height: calc((9 / 16 ) * (100vw - 20px));
|
||||
}
|
||||
.fullGrafana {
|
||||
width: calc(100vw - 2em);
|
||||
}
|
||||
@ -520,6 +535,13 @@ svg {
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.metaSidebar {
|
||||
background-color: none;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.stroke {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
@ -532,10 +554,6 @@ svg {
|
||||
visibility: hidden;
|
||||
display:none;
|
||||
}
|
||||
.mistvideo {
|
||||
width: calc(100vw - 20px);
|
||||
height: calc((9 / 16 ) * (100vw - 20px));
|
||||
}
|
||||
.mobileNoPadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user