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

nicer buttons

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-13 01:40:31 +01:00
parent 488b8c47ab
commit 5bca4c3d1c
2 changed files with 256 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
src/actions/livepeer.js
View File

@ -1,5 +1,6 @@
import * as apiUtil from "../util/livepeer"; import * as apiUtil from "../util/livepeer";
import { receiveErrors } from "./error"; import { receiveErrors } from "./error";
import React from "react";
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)";
@ -117,17 +118,73 @@ export const getEvents = () => async dispatch => {
eventFrom = ""; eventFrom = "";
eventTo = ""; eventTo = "";
if (eventContainsBond) { if (eventContainsBond) {
eventDescription = "🚀activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen; eventDescription =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
activated their orchestrator
</p>
</div>
</div>
<div className="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT stake
</p>
<p style={{ fontSize: 'small' }}>
round {tmpWhen}
</p>
</div>
</div>
} else { } else {
eventDescription = "🚀reactivated and will become active in round " + tmpWhen; eventDescription =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
reactivated their orchestrator
</p>
</div>
</div>
<div className="strokeSmollLeft">
<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;
eventDescription = "❌unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen; eventDescription =
<div className="row" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>❌</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
unbonded
</p>
</div>
</div>
<div className="strokeSmollLeft">
<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) {
@ -138,18 +195,87 @@ export const getEvents = () => async dispatch => {
else if (eventContainsRebond) { else if (eventContainsRebond) {
eventType = "Stake"; eventType = "Stake";
eventColour = stakeColour; eventColour = stakeColour;
eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT"; eventDescription =
<div className="row" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<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") {
eventDescription = "⌛staked " + tmpAmount.toFixed(2) + " LPT"; eventDescription =
<div className="row" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} else if (eventFrom === eventTo) { } else if (eventFrom === eventTo) {
eventFrom = ""; eventFrom = "";
eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT"; eventDescription =
<div className="row" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} else { } else {
eventDescription = "⌛moved a " + tmpAmount.toFixed(2) + " LPT stake"; eventDescription =
<div className="row" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT
</p>
</div>
</div>
} }
} }
// If we have an eventType at this point, we have a completed Event from the previous transaction // If we have an eventType at this point, we have a completed Event from the previous transaction
@ -199,7 +325,27 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const txt = "🏦withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound; const txt =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
withdrew staking rewards
</p>
</div>
</div>
<div className="strokeSmollLeft">
<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,
@ -218,7 +364,27 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const txt = "🏦withdrew " + amount.toFixed(2) + " LPT earned fees"; const txt =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
{amount.toFixed(4)} Eth
</p>
<p style={{ fontSize: 'small' }}>
round {eventObj.data.withdrawRound}
</p>
</div>
</div>
finalEventList.push({ finalEventList.push({
eventType: "Withdraw", eventType: "Withdraw",
eventDescription: txt, eventDescription: txt,
@ -238,7 +404,27 @@ 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 txt = "🔄changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%"; const txt =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<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="strokeSmollLeft">
<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,
@ -261,17 +447,27 @@ export const getEvents = () => async dispatch => {
if (amount1 < thresholdStaking && amount2 < thresholdFees) { if (amount1 < thresholdStaking && amount2 < thresholdFees) {
continue; continue;
} }
let txt = "💰delegator claimed "; let txt =
if (amount1 > thresholdStaking) { <div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
txt += amount1.toFixed(2) + " LPT staking rewards"; <div className="strokeSmollLeft">
if (amount2 > thresholdFees) { <div className="row">
txt += " and " <h3 style={{ margin: 0, padding: 0 }}>💰</h3>
} </div>
} <div className="row">
if (amount2 > thresholdFees) { <p style={{ fontSize: 'small' }}>
txt += amount2.toFixed(4) + " Eth fee rewards"; delegator claimed {eventObj.data.endRound - eventObj.data.startRound + 1} rounds of rewards
} </p>
txt += " from rounds " + eventObj.data.startRound + " to " + eventObj.data.endRound; </div>
</div>
<div className="strokeSmollLeft">
<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,
@ -290,7 +486,24 @@ 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 = "💸called reward worth " + amount1.toFixed(2) + " LPT"; let txt =
<div className="rowAlignLeft" style={{ justifyContent: 'space-between' }}>
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>💸</h3>
</div>
<div className="row">
<p style={{ fontSize: 'small' }}>
called reward
</p>
</div>
</div>
<div className="strokeSmollLeft">
<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!";
} }
@ -389,7 +602,22 @@ 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 txt = "🎟️winning ticket worth " + amount.toFixed(4) + " Eth"; const txt =
<div className="row">
<div className="strokeSmollLeft">
<div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🎟️</h3>
</div>
<div className="strokeSmollLeft">
<p style={{ fontSize: 'small' }}>
winning ticket
</p>
</div>
</div>
<p style={{ fontSize: 'small' }}>
+{amount.toFixed(4)} Eth
</p>
</div>
finalTicketList.push({ finalTicketList.push({
eventType: "RedeemTicket", eventType: "RedeemTicket",
eventDescription: txt, eventDescription: txt,
@ -401,7 +629,7 @@ export const getTickets = () => async dispatch => {
transactionUrl: currentUrl, transactionUrl: currentUrl,
transactionBlock: currentBlock, transactionBlock: currentBlock,
transactionTime: currentTime, transactionTime: currentTime,
eventValue: amount eventValue: amount
}); });
} else if (eventObj.name === "WinningTicketTransfer") { } else if (eventObj.name === "WinningTicketTransfer") {
// For now lets just ignore these, they are boring // For now lets just ignore these, they are boring

6
src/style.css
View File

@ -206,9 +206,9 @@ svg {
font-size: small; font-size: small;
color: rgba(15, 15, 15, 0.8750); color: rgba(15, 15, 15, 0.8750);
background-color: rgba(206, 206, 206, 0.8); background-color: rgba(206, 206, 206, 0.8);
-webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.3);
-moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); -moz-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.3);
box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.3);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;