mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
362 lines
14 KiB
JavaScript
362 lines
14 KiB
JavaScript
import React from "react";
|
|
import {
|
|
getOrchestratorInfo
|
|
} from "./actions/livepeer";
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
/// Displays a single event. Sets selected Orchestrator info in the redux store
|
|
|
|
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 unbondColour = "rgba(122, 23, 51, 0.3)";
|
|
const claimColour = "rgba(77, 91, 42, 0.3)";
|
|
const migrateColour = "rgba(56, 23, 122, 0.3)";
|
|
|
|
const thresholdStaking = 0.001;
|
|
const thresholdFees = 0.00009;
|
|
|
|
const EventButton = (obj) => {
|
|
const dispatch = useDispatch();
|
|
// 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 hasRebondTransaction = false;
|
|
let hasUnbondTransaction = false;
|
|
let hasTransferbondTransaction = false;
|
|
let hasEarningsClaimed = false;
|
|
let hasActivation = false;
|
|
let isOnlyBondRelated = 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" && !hasEarningsClaimed) {
|
|
transactionCaller = eventObj.data.delegator.toLowerCase();
|
|
transactionFrom = eventObj.data.oldDelegate.toLowerCase();
|
|
transactionTo = eventObj.data.newDelegate.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.bondedAmount) / 1000000000000000000;
|
|
transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount) / 1000000000000000000;
|
|
hasBondTransaction = true;
|
|
}
|
|
// Unbond: defines transactionWhen. Defines transactionAmount as X / 1000000000000000000 LPT
|
|
if (eventObj.name === "Unbond") {
|
|
// Caller and from will get overwritten by TransferBond or Rebond, but might as well set them
|
|
if (isOnlyBondRelated || hasEarningsClaimed) {
|
|
transactionName = "Unbond";
|
|
hasEarningsClaimed = false;
|
|
transactionCaller = eventObj.data.delegate.toLowerCase();
|
|
transactionFrom = eventObj.data.delegator.toLowerCase();
|
|
transactionWhen = eventObj.data.withdrawRound;
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
thisColour = unbondColour;
|
|
}
|
|
hasUnbondTransaction = true;
|
|
}
|
|
// TransferBond: defines to transactionFrom and transactionTo. Defines transactionAmount as X / 1000000000000000000 LPT
|
|
if (eventObj.name === "TransferBond" && !hasBondTransaction && !hasRebondTransaction) {
|
|
// transactionFrommight get overwritten by Rebond, but might as well set them
|
|
if (isOnlyBondRelated) {
|
|
transactionFrom = eventObj.data.oldDelegator.toLowerCase();
|
|
transactionTo = eventObj.data.newDelegator.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
}
|
|
hasTransferbondTransaction = true;
|
|
}
|
|
// TransferBond: defines to transactionFrom and transactionTo. Defines transactionAmount as X / 1000000000000000000 LPT
|
|
if (eventObj.name === "Rebond") {
|
|
// transactionCaller might get overwritten by TranserBond, but might as well set them
|
|
if (isOnlyBondRelated) {
|
|
transactionTo = eventObj.data.delegate.toLowerCase();
|
|
transactionCaller = eventObj.data.delegator.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
}
|
|
if (hasEarningsClaimed) {
|
|
transactionName = "Migrate";
|
|
hasEarningsClaimed = false;
|
|
transactionTo = eventObj.data.delegate.toLowerCase();
|
|
transactionCaller = eventObj.data.delegator.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
thisColour = migrateColour;
|
|
}
|
|
hasRebondTransaction = true;
|
|
}
|
|
|
|
// TranscoderActivated: defines transactionName as a stake claim. Defines transactionWhen
|
|
if (eventObj.name === "EarningsClaimed" && !hasUnbondTransaction && !hasActivation && !hasBondTransaction && !hasRebondTransaction) {
|
|
transactionName = "Claim";
|
|
transactionWhen = eventObj.data.endRound;
|
|
transactionFrom = eventObj.data.delegate;
|
|
transactionCaller = eventObj.data.delegator;
|
|
transactionAmount = parseFloat(eventObj.data.rewards) / 1000000000000000000;
|
|
transactionAdditionalAmount = parseFloat(eventObj.data.fees) / 1000000000000000000;
|
|
thisColour = claimColour;
|
|
isOnlyBondRelated = false;
|
|
hasEarningsClaimed = 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.toLowerCase();
|
|
}
|
|
thisColour = activationColour;
|
|
isOnlyBondRelated = false;
|
|
hasActivation = true;
|
|
}
|
|
// TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT
|
|
if (eventObj.name === "Reward") {
|
|
transactionName = "Reward";
|
|
transactionCaller = eventObj.data.transcoder.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
thisColour = rewardColour;
|
|
isOnlyBondRelated = false;
|
|
}
|
|
// TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
|
|
if (eventObj.name === "TranscoderUpdate") {
|
|
transactionName = "Update";
|
|
transactionCaller = eventObj.data.transcoder.toLowerCase();
|
|
transactionAmount = eventObj.data.rewardCut / 10000;
|
|
transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000);
|
|
thisColour = updateColour;
|
|
isOnlyBondRelated = false;
|
|
}
|
|
// WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
|
|
if (eventObj.name === "WithdrawStake") {
|
|
transactionName = "Withdraw";
|
|
transactionCaller = eventObj.data.delegator.toLowerCase();
|
|
transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
|
transactionWhen = eventObj.data.withdrawRound;
|
|
thisColour = withdrawStakeColour;
|
|
isOnlyBondRelated = false;
|
|
}
|
|
if (eventObj.name === "WithdrawFees") {
|
|
// console.log("Skipping WithdrawFees");
|
|
}
|
|
})
|
|
|
|
// If we only had a bond transaction and nothing else, this is a stake
|
|
if (hasBondTransaction && transactionName == "") {
|
|
transactionName = "Stake";
|
|
thisColour = stakeColour;
|
|
}
|
|
|
|
// Lone Rebond, treat as new stake
|
|
if (hasRebondTransaction && transactionName == "") {
|
|
transactionName = "Rebond";
|
|
thisColour = stakeColour;
|
|
}
|
|
|
|
// Check name filter on transactionCaller, transactionFrom, transactionTo
|
|
if (obj.searchTerm) {
|
|
if (obj.searchTerm !== "") {
|
|
let isFiltered = true;
|
|
if (transactionCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
|
if (transactionFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
|
if (transactionTo.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
|
if (isFiltered) return null;
|
|
}
|
|
}
|
|
let isFiltered = true;
|
|
// Check boolean filters on transactionName
|
|
let count = 0;
|
|
if (obj.filterActivated) {
|
|
if (transactionName === "Activated") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.rewardActivated) {
|
|
if (transactionName === "Reward") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.updateActivated) {
|
|
if (transactionName === "Update") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.withdrawActivated) {
|
|
if (transactionName === "Withdraw") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.stakeActivated) {
|
|
if (transactionName === "Stake") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.stakeActivated) {
|
|
if (transactionName === "Rebond") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.stakeActivated) {
|
|
if (transactionName === "Migrate") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.unbondActivated) {
|
|
if (transactionName === "Unbond") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (obj.delegatorRewardActivated) {
|
|
if (transactionName === "Claim") {
|
|
isFiltered = false;
|
|
}
|
|
count++;
|
|
}
|
|
if (isFiltered && count) {
|
|
return null;
|
|
}
|
|
|
|
// Displays info specific to a type of transactions
|
|
let eventSpecificInfo;
|
|
let eventTo;
|
|
let eventFrom;
|
|
if (transactionName === "Reward") {
|
|
if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>called reward worth {transactionAmount.toFixed(2)} LPT. nice</p>
|
|
</div>
|
|
} else {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>called reward worth {transactionAmount.toFixed(2)} LPT</p>
|
|
</div>
|
|
}
|
|
} else if (transactionName === "Claim") {
|
|
if (transactionFrom == "0x0000000000000000000000000000000000000000") {
|
|
console.log("EMPTY CLAIM " + thisURL);
|
|
console.log(thisData);
|
|
return null;
|
|
}
|
|
let claimString = "delegator claimed ";
|
|
if (transactionAmount > thresholdStaking) {
|
|
claimString += transactionAmount.toFixed(2) + " LPT staking rewards";
|
|
if (transactionAdditionalAmount > thresholdFees) {
|
|
claimString += " and "
|
|
}
|
|
}
|
|
if (transactionAdditionalAmount > thresholdFees) {
|
|
claimString += transactionAdditionalAmount.toFixed(4) + " Eth fee rewards";
|
|
}
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>{claimString} at</p>
|
|
</div>
|
|
eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
|
|
} else if (transactionName === "Update") {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%</p>
|
|
</div>
|
|
} else if (transactionName === "Unbond") {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>unbonded {transactionAmount.toFixed(2)} LPT starting from round {transactionWhen}</p>
|
|
</div>
|
|
eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
|
|
} else if (transactionName === "Stake") {
|
|
eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
|
|
if (transactionFrom == "0x0000000000000000000000000000000000000000") {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p> staked {transactionAmount.toFixed(2)} LPT to </p>
|
|
</div>
|
|
} else {
|
|
eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>moved {transactionAmount.toFixed(2)} LPT stake</p>
|
|
</div>
|
|
}
|
|
} else if (transactionName === "Rebond") {
|
|
eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>increased their stake with {transactionAmount.toFixed(2)} LPT at</p>
|
|
</div>
|
|
} else if (transactionName === "Migrate") {
|
|
eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>migrated {transactionAmount.toFixed(2)} LPT to L2 at</p>
|
|
</div>
|
|
} else if (transactionName === "Withdraw") {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>withdrew {(transactionAmount).toFixed(2)} LPT in round {transactionWhen}</p>
|
|
</div>
|
|
} else if (transactionName === "Activated") {
|
|
if (hasBondTransaction) {
|
|
eventSpecificInfo =
|
|
<div className="rowAlignLeft">
|
|
<p>activated with a self stake of {transactionAmount.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="rowAlignLeft">
|
|
<p>reactivated and will become active in round {transactionWhen}</p>
|
|
</div>
|
|
}
|
|
} else {
|
|
console.log("UNIMPLEMENTED " + thisURL);
|
|
console.log(thisData);
|
|
return null;
|
|
}
|
|
|
|
// IF ON MOBILE
|
|
// transactionCaller.substring(0,8)+"..."
|
|
let eventArrow;
|
|
if(eventTo && eventFrom){
|
|
eventArrow = <p>→</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
|
|
<div style={{ flexDirection: 'row', display: "flex" }}>
|
|
<a href={"https://explorer.livepeer.org/accounts/" + transactionCaller}>
|
|
<img alt="" src="livepeer.png" width="30" height="30" />
|
|
</a>
|
|
<div className="row">
|
|
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionCaller)) }} >{transactionCaller}</button>
|
|
</div>
|
|
</div>
|
|
{eventSpecificInfo}
|
|
{eventTo}
|
|
{eventArrow}
|
|
{eventFrom}
|
|
<a href={thisURL}>
|
|
<img alt="" src="arb.svg" width="30" height="30" />
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EventButton; |