stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added Ticket component

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-13 17:42:49 +01:00
parent 9ca11de924
commit de701edbaf
5 changed files with 107 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

324
src/actions/livepeer.js
View File

@ -1,6 +1,7 @@
import * as apiUtil from "../util/livepeer"; import * as apiUtil from "../util/livepeer";
import { receiveErrors } from "./error"; import { receiveErrors } from "./error";
import React from "react"; import React from "react";
import Ticket from "../components/TicketViewer";
const claimColour = "rgba(25, 158, 29, 0.3)"; const claimColour = "rgba(25, 158, 29, 0.3)";
const stakeColour = "rgba(25, 158, 147, 0.3)"; const stakeColour = "rgba(25, 158, 147, 0.3)";
@ -118,76 +119,31 @@ export const getEvents = () => async dispatch => {
eventFrom = ""; eventFrom = "";
eventTo = ""; eventTo = "";
if (eventContainsBond) { if (eventContainsBond) {
eventDescription = const subtext = "activated their orchestrator";
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> const descriptions = [
<div className="strokeSmoll"> tmpAmount.toFixed(2) + " LPT stake",
<div className="row"> "round " + tmpWhen
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3> ]
</div> eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
<div className="row">
<p style={{ fontSize: 'small' }}>
activated their orchestrator
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT stake
</p>
<p style={{ fontSize: 'small' }}>
round {tmpWhen}
</p>
</div>
</div>
} else { } else {
eventDescription = const subtext = "reactivated their orchestrator";
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> const descriptions = [
<div className="strokeSmoll"> "round " + tmpWhen
<div className="row"> ]
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3> eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
reactivated their orchestrator
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
round {tmpWhen}
</p>
</div>
</div>
} }
} }
// Lone Unbond => Unbond Event // Lone Unbond => Unbond Event
else if (eventContainsUnbond) { else if (eventContainsUnbond) {
eventType = "Unbond"; eventType = "Unbond";
eventColour = unbondColour; eventColour = unbondColour;
const subtext = "unbonded";
const descriptions = [
tmpAmount.toFixed(2) + " LPT",
"round " + tmpWhen
]
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"❌"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>❌</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
unbonded
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
<p style={{ fontSize: 'small' }}>
round {tmpWhen}
</p>
</div>
</div>
} }
// Lone Bond => Stake Event // Lone Bond => Stake Event
else if (eventContainsBond) { else if (eventContainsBond) {
@ -198,90 +154,38 @@ export const getEvents = () => async dispatch => {
else if (eventContainsRebond) { else if (eventContainsRebond) {
eventType = "Stake"; eventType = "Stake";
eventColour = stakeColour; eventColour = stakeColour;
const subtext = "changed stake amount";
const descriptions = [
tmpAmount.toFixed(2) + " LPT"
]
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
changed stake amount
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} }
// Fill description of Stake Event if it wasn't set yet // Fill description of Stake Event if it wasn't set yet
if (eventType === "Stake" && eventDescription === "") { if (eventType === "Stake" && eventDescription === "") {
if (eventFrom === "0x0000000000000000000000000000000000000000") { if (eventFrom === "0x0000000000000000000000000000000000000000") {
const subtext = "is now staking";
const descriptions = [
tmpAmount.toFixed(2) + " LPT"
]
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
is now staking
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} else if (eventFrom === eventTo) { } else if (eventFrom === eventTo) {
eventFrom = ""; eventFrom = "";
const subtext = "changed stake amount";
const descriptions = [
tmpAmount.toFixed(2) + " LPT"
]
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
changed stake amount
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} else { } else {
const subtext = "moved stake to a new orchestrator";
const descriptions = [
tmpAmount.toFixed(2) + " LPT"
]
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
moved stake to a new orchestrator
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} }
} }
@ -332,28 +236,13 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const subtext = "withdrew stake";
const descriptions = [
amount.toFixed(2) + " LPT",
"round " + eventObj.data.withdrawRound
]
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"🏦"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
withdrew stake
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{amount.toFixed(2)} LPT
</p>
<p style={{ fontSize: 'small' }}>
round {eventObj.data.withdrawRound}
</p>
</div>
</div>
finalEventList.push({ finalEventList.push({
eventType: "Withdraw", eventType: "Withdraw",
eventDescription: txt, eventDescription: txt,
@ -372,25 +261,12 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const subtext = "withdrew fee rewards";
const descriptions = [
amount.toFixed(4) + " Eth"
]
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"🏦"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
withdrew fee rewards
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{amount.toFixed(4)} Eth
</p>
</div>
</div>
finalEventList.push({ finalEventList.push({
eventType: "Withdraw", eventType: "Withdraw",
eventDescription: txt, eventDescription: txt,
@ -410,28 +286,13 @@ export const getEvents = () => async dispatch => {
eventContainsTranscoderUpdate = true; eventContainsTranscoderUpdate = true;
const amount1 = parseFloat(eventObj.data.rewardCut) / 10000; const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
const amount2 = 100 - (eventObj.data.feeShare / 10000); const amount2 = 100 - (eventObj.data.feeShare / 10000);
const subtext = "changed commission rates";
const descriptions = [
amount1.toFixed(2) + "% on staking rewards",
amount2.toFixed(2) + "% on transcoding fees"
]
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"🔄"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🔄</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
changed commission rates
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
{amount1.toFixed(2)}% on staking rewards
</p>
<p style={{ fontSize: 'small' }}>
{amount2.toFixed(2)}% on transcoding fees
</p>
</div>
</div>
finalEventList.push({ finalEventList.push({
eventType: "Update", eventType: "Update",
eventDescription: txt, eventDescription: txt,
@ -454,28 +315,13 @@ export const getEvents = () => async dispatch => {
if (amount1 < thresholdStaking && amount2 < thresholdFees) { if (amount1 < thresholdStaking && amount2 < thresholdFees) {
continue; continue;
} }
const subtext = "delegator claimed " + (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds of rewards";
const descriptions = [
"+" + amount1.toFixed(2) + " LPT rewards",
"+" + amount2.toFixed(4) + " Eth fees"
]
let txt = let txt =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"💰"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>💰</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
delegator claimed {eventObj.data.endRound - eventObj.data.startRound + 1} rounds of rewards
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
+{amount1.toFixed(2)} LPT rewards
</p>
<p style={{ fontSize: 'small' }}>
+{amount2.toFixed(4)} Eth fees
</p>
</div>
</div>
finalEventList.push({ finalEventList.push({
eventType: "Claim", eventType: "Claim",
eventDescription: txt, eventDescription: txt,
@ -494,25 +340,12 @@ export const getEvents = () => async dispatch => {
else if (eventObj.name === "Reward") { else if (eventObj.name === "Reward") {
eventContainsReward = true; eventContainsReward = true;
const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000; const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
let txt = const subtext = "called reward";
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> const descriptions = [
<div className="strokeSmoll"> "+" + amount1.toFixed(2) + " LPT"
<div className="row"> ]
<h3 style={{ margin: 0, padding: 0 }}>💸</h3> const txt =
</div> <Ticket icon={"💸"} subtext={subtext} descriptions={descriptions} />
<div className="row">
<p style={{ fontSize: 'small' }}>
called reward
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
+{amount1.toFixed(2)} LPT
</p>
</div>
</div>
if (Math.floor(amount1) == 69) { if (Math.floor(amount1) == 69) {
txt += "... Nice!"; txt += "... Nice!";
} }
@ -611,25 +444,12 @@ export const getTickets = () => async dispatch => {
// Always split off WithdrawStake as a separate Withdraw Event // Always split off WithdrawStake as a separate Withdraw Event
if (eventObj.name === "WinningTicketRedeemed") { if (eventObj.name === "WinningTicketRedeemed") {
const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000; const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000;
const subtext = "winning ticket";
const descriptions = [
"+" + amount.toFixed(4) + " Eth"
]
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}> <Ticket icon={"🎟️"} subtext={subtext} descriptions={descriptions} />
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🎟️</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
winning ticket
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}>
+{amount.toFixed(4)} Eth
</p>
</div>
</div>
finalTicketList.push({ finalTicketList.push({
eventType: "RedeemTicket", eventType: "RedeemTicket",
eventDescription: txt, eventDescription: txt,

30
src/components/TicketViewer.js Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
const Ticket = (obj) => {
return (
<div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmoll">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>{obj.icon}</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
{obj.subtext}
</p>
</div>
</div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
{obj.descriptions.map(function (thisTextItem, i) {
return (
<p style={{ fontSize: 'small' }}>
{thisTextItem}
</p>
)
})}
</div>
</div>
)
}
export default Ticket;

2
src/components/eventViewer.js
View File

@ -232,7 +232,7 @@ const EventViewer = (obj) => {
<div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}> <div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
{filterBit} {filterBit}
<div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}> <div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}> <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "350px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
<div className="content-wrapper" style={{ width: '100%' }}> <div className="content-wrapper" style={{ width: '100%' }}>
<ScrollContainer activationDistance={1} className="overflow-container" <ScrollContainer activationDistance={1} className="overflow-container"
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}> hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>

2
src/pages/grafana.js
View File

@ -42,7 +42,7 @@ const Grafana = (obj) => {
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="flexContainer"> <div className="flexContainer">
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}> <div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
<div className="stroke roundedOpaque" style={{}}> <div className="stroke roundedOpaque">
<div className="flexContainer" style={{ margin: 0, textAlign: 'center',alignItems: 'center', justifyContent:'center' }}> <div className="flexContainer" style={{ margin: 0, textAlign: 'center',alignItems: 'center', justifyContent:'center' }}>
<div className="row"> <div className="row">
<img alt="" src="livepeer.png" width="30" height="30" /> <img alt="" src="livepeer.png" width="30" height="30" />

5
src/style.css
View File

@ -151,15 +151,16 @@ svg {
height: calc( 100vh - 50px); height: calc( 100vh - 50px);
max-height: calc( 100vh - 50px); max-height: calc( 100vh - 50px);
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
overflow-y: auto;
} }
#sideContent { #sideContent {
background-color: rgba(214, 214, 214, 0.8); background-color: rgba(214, 214, 214, 0.8);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692); box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692);
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
width: 400px; max-width: 400px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }