mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
MVP Event Viewer and Buttons
This commit is contained in:
parent
2c3b493349
commit
2681d2c4b2
@ -1,59 +1,144 @@
|
||||
import React from "react";
|
||||
|
||||
const activationColour = "rgba(23, 60, 122, 0.3)";
|
||||
const rewardColour = "rgba(20, 99, 29, 0.3)";
|
||||
const updateColour = "rgba(122, 63, 23, 0.3)";
|
||||
const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
|
||||
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
||||
|
||||
const EventButton = (obj) => {
|
||||
// Data shared among all events in this transaction
|
||||
const thisURL = obj.transactionUrl;
|
||||
const thisTransaction = obj.transactionHash;
|
||||
const thisData = obj.events;
|
||||
const thisIndex = obj.idx;
|
||||
// Abstraction of all events in this transaction
|
||||
let transactionName = "";
|
||||
let transactionCaller = "";
|
||||
let transactionFrom = "";
|
||||
let transactionTo = "";
|
||||
let transactionAmount = 0;
|
||||
let transactionAdditionalAmount = 0;
|
||||
let transactionWhen = 0;
|
||||
let hasBondTransaction = false;
|
||||
let isOnlyBond = true;
|
||||
let thisColour = "";
|
||||
|
||||
|
||||
// Which we will fill in by going over all of the events once
|
||||
thisData.map(eventObj => {
|
||||
// Bond: contains amount the transaction is about and who is participating
|
||||
if (eventObj.name == "Bond") {
|
||||
transactionCaller = eventObj.data.delegator;
|
||||
transactionFrom = eventObj.data.oldDelegate;
|
||||
transactionTo = eventObj.data.newDelegate;
|
||||
transactionAmount = parseFloat(eventObj.data.bondedAmount);
|
||||
transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount);
|
||||
hasBondTransaction = true;
|
||||
}
|
||||
// TranscoderActivated: defines transactionName. Defines transactionAmount as X * 7e-18 LPT
|
||||
if (eventObj.name == "TranscoderActivated") {
|
||||
transactionName = "Activated";
|
||||
transactionWhen = eventObj.data.activationRound;
|
||||
if (!hasBondTransaction) {
|
||||
transactionCaller = eventObj.data.transcoder;
|
||||
}
|
||||
thisColour = activationColour;
|
||||
isOnlyBond = false;
|
||||
}
|
||||
// TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT
|
||||
if (eventObj.name == "Reward") {
|
||||
transactionName = "Reward";
|
||||
transactionCaller = eventObj.data.transcoder;
|
||||
transactionAmount = eventObj.data.amount / 1000000000000000000;
|
||||
thisColour = rewardColour;
|
||||
isOnlyBond = false;
|
||||
}
|
||||
// TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
|
||||
if (eventObj.name == "TranscoderUpdate") {
|
||||
transactionName = "Update";
|
||||
transactionCaller = eventObj.data.transcoder;
|
||||
transactionAmount = eventObj.data.rewardCut / 10000;
|
||||
transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000);
|
||||
thisColour = updateColour;
|
||||
isOnlyBond = false;
|
||||
}
|
||||
// WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
|
||||
if (eventObj.name == "WithdrawStake") {
|
||||
transactionName = "Withdraw";
|
||||
transactionCaller = eventObj.data.delegator;
|
||||
transactionAmount = eventObj.data.amount / 1000000000000000000;
|
||||
transactionWhen = eventObj.data.withdrawRound;
|
||||
thisColour = withdrawStakeColour;
|
||||
isOnlyBond = false;
|
||||
}
|
||||
})
|
||||
|
||||
// If we only had a bond transaction and nothing else, this is a stake
|
||||
if (hasBondTransaction && isOnlyBond){
|
||||
transactionName = "Stake";
|
||||
thisColour = stakeColour;
|
||||
}
|
||||
|
||||
let eventSpecificInfo;
|
||||
if (obj.name == "EarningsClaimed") {
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>(Round {obj.data.endRound}) Claim: {obj.data.delegator} earned {(obj.data.rewards / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}</p>
|
||||
</div>
|
||||
} else if (obj.name == "Unbond") {
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>(Round {obj.data.withdrawRound}) Unbond: {obj.data.delegator} unbonded {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}</p>
|
||||
</div>
|
||||
} else if (obj.name == "TransferBond") {
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>TransferBond: transfered bond worth {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth from {obj.data.oldDelegator} to {obj.data.newDelegator}</p>
|
||||
</div>
|
||||
} else if (obj.name == "Bond") {
|
||||
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(50,50,50,0.3)' }}>
|
||||
<p>{obj.data.delegator} delegated {(obj.data.bondedAmount / 1000000000000000000).toFixed(4)} LPT from {obj.data.oldDelegate} to {obj.data.newDelegate}</p>
|
||||
</div>
|
||||
} else if (obj.name == "Rebond") {
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>Rebond: {obj.data.delegator} @ {obj.data.delegate}</p>
|
||||
</div>
|
||||
} else if (obj.name == "WithdrawFees") {
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>{obj.data.recipient} claimed stake</p>
|
||||
</div>
|
||||
} else if (obj.name == "WithdrawStake") {
|
||||
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(255, 0, 0, 0.3)' }}>
|
||||
<p>{obj.data.delegator} withdrew stake worth {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT in round {obj.data.withdrawRound}</p>
|
||||
</div>
|
||||
} else if (obj.name == "Reward") {
|
||||
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 179, 221, 0.3)' }}>
|
||||
<p>O {obj.data.transcoder} called reward for {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT</p>
|
||||
</div>
|
||||
} else if (obj.name == "TranscoderUpdate") {
|
||||
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(215, 15, 0, 0.3)' }}>
|
||||
<p>O {obj.data.transcoder} changed their rewardCut to {(obj.data.rewardCut / 10000).toFixed(2)}% and their feeCut to {(100 - (obj.data.feeShare / 10000)).toFixed(2)}%</p>
|
||||
</div>
|
||||
} else if (obj.name == "TranscoderActivated") {
|
||||
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 255, 1, 0.3)' }}>
|
||||
<p>O {obj.data.transcoder} activated and will become active in {obj.data.activationRound}</p>
|
||||
if (transactionName == "Reward") {
|
||||
if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p>called reward worth {transactionAmount.toFixed(2)} LPT. nice</p>
|
||||
</div>
|
||||
} else {
|
||||
console.log(obj);
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p>called reward worth {transactionAmount.toFixed(2)} LPT</p>
|
||||
</div>
|
||||
}
|
||||
}else if (transactionName == "Update") {
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p>changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%</p>
|
||||
</div>
|
||||
}else if (transactionName == "Stake") {
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p> changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount * 7e-18).toFixed(2)} LPT</p>
|
||||
</div>
|
||||
}else if (transactionName == "Withdraw") {
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p> withdrew {(transactionAmount * 7e-18).toFixed(2)} LPT in round {transactionWhen}</p>
|
||||
</div>
|
||||
} else if (transactionName == "Activated") {
|
||||
if (hasBondTransaction) {
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p>{transactionCaller} activated with a self stake of {(transactionAmount * 7e-18).toFixed(2)} LPT and will become active in round {transactionWhen}</p>
|
||||
</div>
|
||||
} else {
|
||||
// If there was no bond transaction, display fewer information
|
||||
eventSpecificInfo =
|
||||
<div className="row">
|
||||
<p>reactivated and will become active in round {transactionWhen}</p>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
console.log(thisData);
|
||||
eventSpecificInfo = <div className="row">
|
||||
<p>UNIMPLEMENTED: {obj.event}</p>
|
||||
<p>UNIMPLEMENTED</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
// IF ON MOBILE
|
||||
// transactionCaller.substring(0,8)+"..."
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
|
||||
<a href={"https://explorer.livepeer.org/accounts/" + transactionCaller} style={{ flexDirection: 'row', display: "flex" }}>
|
||||
<img alt="" src="livepeer.png" width="30" height="30" />
|
||||
{obj.idx}: {eventSpecificInfo}
|
||||
<a href={obj.transactionUrl}>
|
||||
<p>{transactionCaller}</p>
|
||||
</a>
|
||||
{eventSpecificInfo}
|
||||
<a href={thisURL}>
|
||||
<img alt="" src="arb.svg" width="30" height="30" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -5,39 +5,53 @@ import ScrollContainer from 'react-indiana-drag-scroll';
|
||||
const EventViewer = (obj) => {
|
||||
let txCounter = 0;
|
||||
let currentTx = "";
|
||||
let currentUrl = "";
|
||||
let currentHash = "";
|
||||
let eventCache = [];
|
||||
|
||||
let eventBundle = [];
|
||||
let finalUrl = "";
|
||||
let finalHash = "";
|
||||
let finalIdx = 0;
|
||||
return (
|
||||
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '200px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
|
||||
<div className="content-wrapper">
|
||||
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab' }}>
|
||||
{obj.events.slice(0).reverse().map((eventObj, idx) => {
|
||||
// TODO: once txCounter falls out of a certain range, stop parsing new blocks
|
||||
// Apply the filter first so that the IDX only counts displayed blocks
|
||||
// Skip WithdrawFees buttons cause they are not interesting for the MVP
|
||||
if (eventObj.name == "WithdrawFees"){
|
||||
// Filter
|
||||
if (eventObj.name == "WithdrawFees" || eventObj.name == "TransferBond"
|
||||
|| eventObj.name == "Rebond" || eventObj.name == "Unbond" || eventObj.name == "EarningsClaimed"){
|
||||
return;
|
||||
}
|
||||
// New transaction found
|
||||
if (currentTx != eventObj.transactionHash) {
|
||||
txCounter++;
|
||||
currentTx = eventObj.transactionHash;
|
||||
// Save old event data
|
||||
eventBundle = eventCache;
|
||||
eventCache = [];
|
||||
finalUrl = currentUrl;
|
||||
finalHash = currentHash;
|
||||
finalIdx = txCounter;
|
||||
// Reset event data
|
||||
currentTx = eventObj.transactionHash;
|
||||
currentUrl = eventObj.transactionUrl;
|
||||
currentHash = eventObj.transactionHash;
|
||||
eventCache = [eventObj];
|
||||
txCounter++;
|
||||
} else {
|
||||
// Push event to current cache
|
||||
eventCache.push(eventObj);
|
||||
return;
|
||||
}
|
||||
// Push if not completely filtered out
|
||||
if (eventBundle.length){
|
||||
return <EventButton
|
||||
key={eventObj.transactionUrl + idx}
|
||||
transactionUrl={eventObj.transactionUrl}
|
||||
transactionHash={eventObj.transactionHash}
|
||||
name={eventObj.name}
|
||||
data={eventObj.data}
|
||||
address={eventObj.address}
|
||||
idx={txCounter}
|
||||
subEvents={eventBundle}
|
||||
key={eventObj.transactionHash+idx}
|
||||
transactionUrl={finalUrl}
|
||||
transactionHash={finalHash}
|
||||
events={eventBundle}
|
||||
idx={finalIdx}
|
||||
/>
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
|
||||
@ -83,10 +83,10 @@ class Grafana extends React.Component {
|
||||
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
|
||||
<Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
|
||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
|
||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
|
||||
</div>
|
||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
|
||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
|
||||
</div>
|
||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
|
||||
|
||||
@ -42,7 +42,6 @@ class Livepeer extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.livepeer.thisOrchestrator);
|
||||
if (this.state.redirectToHome) {
|
||||
return <Navigate push to="/" />;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user