mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
Prerenderer which makes everything awesome
This commit is contained in:
parent
e7302b1828
commit
a5a6a3e475
63402
dumps/events.json
63402
dumps/events.json
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,18 @@
|
||||
import * as apiUtil from "../util/livepeer";
|
||||
import { receiveErrors } from "./error";
|
||||
|
||||
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(115, 110, 22, 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;
|
||||
|
||||
export const RECEIVE_QUOTES = "RECEIVE_QUOTES";
|
||||
export const RECEIVE_BLOCKCHAIN_DATA = "RECEIVE_BLOCKCHAIN_DATA";
|
||||
export const RECEIVE_EVENTS = "RECEIVE_EVENTS";
|
||||
@ -44,8 +56,262 @@ export const getBlockchainData = () => async dispatch => {
|
||||
export const getEvents = () => async dispatch => {
|
||||
const response = await apiUtil.getEvents();
|
||||
const data = await response.json();
|
||||
// Combine raw list of events into a list of useful Events
|
||||
if (response.ok) {
|
||||
return dispatch(setEvents(data));
|
||||
let finalEventList = [];
|
||||
// Current transaction we are processing
|
||||
let txCounter = 0;
|
||||
let currentTx = "";
|
||||
let currentUrl = "";
|
||||
// Current Event we are processing
|
||||
let eventType = ""; // Named type: Withdraw, Update, Claim, Reward, Activate, Unbond, Stake
|
||||
let eventDescription = ""; // Descriptive text, also containing Amount, AmountOther and When
|
||||
let eventCaller = ""; // address we will display on the left side
|
||||
let eventFrom = ""; // address from which X gets taken
|
||||
let eventTo = ""; // address to which X gets sent
|
||||
let eventColour = "rgba(255,255,255,0.5)";
|
||||
let eventContainsBond = false;
|
||||
let eventContainsTranscoderActivated = false;
|
||||
let eventContainsUnbond = false;
|
||||
let eventContainsRebond = false;
|
||||
let eventContainsTransferBond = false;
|
||||
let eventContainsTranscoderUpdate = false;
|
||||
let eventContainsEarningsClaimed = false;
|
||||
let eventContainsReward = false;
|
||||
// Temp vars for the current Event we are processing
|
||||
let tmpAmount = 0;
|
||||
let tmpAmountOther = "";
|
||||
let tmpWhen = "";
|
||||
// Group Events into transactions. Always reset when the transactionID changes
|
||||
{
|
||||
for (const eventObj of data.slice(0).reverse()) {
|
||||
if (currentTx === "") {
|
||||
currentTx = eventObj.transactionHash;
|
||||
currentUrl = eventObj.transactionUrl;
|
||||
}
|
||||
// New transaction found
|
||||
if (currentTx !== eventObj.transactionHash) {
|
||||
// Unbond <> TransferBond <> Rebond => Stake Event
|
||||
if (eventContainsUnbond && eventContainsTransferBond && eventContainsRebond) {
|
||||
// If also hasEarningsClaimed => Migrate Event
|
||||
if (eventContainsEarningsClaimed) {
|
||||
eventType = "Migrate";
|
||||
eventColour = migrateColour;
|
||||
eventDescription = "migrated " + tmpAmount.toFixed(2) + " LPT to L2 at";
|
||||
} else {
|
||||
eventType = "Stake";
|
||||
eventColour = stakeColour;
|
||||
}
|
||||
}
|
||||
// (Bond <>) TranscoderActivated => Activate Event
|
||||
else if (eventContainsTranscoderActivated) {
|
||||
eventType = "Activate";
|
||||
eventColour = activationColour;
|
||||
eventFrom = "";
|
||||
eventTo = "";
|
||||
if (eventContainsBond) {
|
||||
eventDescription = "activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen;
|
||||
} else {
|
||||
eventDescription = "reactivated and will become active in round " + tmpWhen;
|
||||
}
|
||||
}
|
||||
// Lone Unbond => Unbond Event
|
||||
else if (eventContainsUnbond) {
|
||||
eventType = "Unbond";
|
||||
eventColour = unbondColour;
|
||||
eventDescription = "unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen;
|
||||
|
||||
}
|
||||
// Lone Bond => Stake Event
|
||||
else if (eventContainsBond) {
|
||||
eventType = "Stake";
|
||||
eventColour = stakeColour;
|
||||
}
|
||||
// Lone Rebond => Stake Event
|
||||
else if (eventContainsRebond) {
|
||||
eventType = "Stake";
|
||||
eventColour = stakeColour;
|
||||
eventDescription = "increased their stake with " + tmpAmount.toFixed(2) + " LPT at";
|
||||
}
|
||||
|
||||
// Fill description of Stake Event if it wasn't set yet
|
||||
if (eventType === "Stake" && eventDescription === "") {
|
||||
if (eventFrom === "0x0000000000000000000000000000000000000000") {
|
||||
eventDescription = "staked " + tmpAmount.toFixed(2) + " LPT with";
|
||||
} else {
|
||||
eventDescription = "moved a " + tmpAmount.toFixed(2) + " LPT stake";
|
||||
}
|
||||
}
|
||||
// If we have an eventType at this point, we have a completed Event from the previous transaction
|
||||
if (eventType !== "") {
|
||||
finalEventList.push({
|
||||
eventType,
|
||||
eventDescription,
|
||||
eventCaller,
|
||||
eventFrom,
|
||||
eventTo,
|
||||
eventColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
}
|
||||
|
||||
// Reset event data
|
||||
eventType = "";
|
||||
eventDescription = "";
|
||||
eventCaller = "";
|
||||
eventFrom = "";
|
||||
eventTo = "";
|
||||
eventColour = "";
|
||||
tmpAmount = 0;
|
||||
tmpAmountOther = "";
|
||||
tmpWhen = "";
|
||||
eventContainsBond = false;
|
||||
eventContainsTranscoderActivated = false;
|
||||
eventContainsUnbond = false;
|
||||
eventContainsRebond = false;
|
||||
eventContainsTransferBond = false;
|
||||
eventContainsTranscoderUpdate = false;
|
||||
eventContainsEarningsClaimed = false;
|
||||
eventContainsReward = false;
|
||||
txCounter++;
|
||||
currentTx = eventObj.transactionHash;
|
||||
currentUrl = eventObj.transactionUrl;
|
||||
}
|
||||
// Always split off WithdrawStake as a separate Withdraw Event
|
||||
if (eventObj.name === "WithdrawStake") {
|
||||
const amount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
const txt = " withdrew a " + amount + " LPT stake in round " + eventObj.data.withdrawRound;
|
||||
finalEventList.push({
|
||||
eventType: "Withdraw",
|
||||
eventDescription: txt,
|
||||
eventCaller: eventObj.data.delegator.toLowerCase(),
|
||||
eventFrom: "",
|
||||
eventTo: "",
|
||||
eventColour: withdrawStakeColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
} else if (eventObj.name === "WithdrawFees") {
|
||||
const amount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
const txt = " withdrew " + amount + " LPT earned fees from " + eventObj.data.delegator;
|
||||
finalEventList.push({
|
||||
eventType: "Withdraw",
|
||||
eventDescription: txt,
|
||||
eventCaller: eventObj.data.delegator.toLowerCase(),
|
||||
eventFrom: "",
|
||||
eventTo: "",
|
||||
eventColour: withdrawStakeColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
}
|
||||
// Always split off TranscoderUpdate as a separate Update Event
|
||||
else if (eventObj.name === "TranscoderUpdate") {
|
||||
eventContainsTranscoderUpdate = true;
|
||||
const amount1 = parseFloat(eventObj.data.rewardCut) / 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) + "%";
|
||||
finalEventList.push({
|
||||
eventType: "Update",
|
||||
eventDescription: txt,
|
||||
eventCaller: eventObj.data.transcoder.toLowerCase(),
|
||||
eventFrom: "",
|
||||
eventTo: "",
|
||||
eventColour: updateColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
}
|
||||
// Always split off EarningsClaimed as a separate Claim Event
|
||||
else if (eventObj.name === "EarningsClaimed") {
|
||||
eventContainsEarningsClaimed = true;
|
||||
const amount1 = parseFloat(eventObj.data.rewards) / 1000000000000000000;
|
||||
const amount2 = parseFloat(eventObj.data.fees) / 1000000000000000000;
|
||||
if (amount1 < thresholdStaking && amount2 < thresholdFees) {
|
||||
continue;
|
||||
}
|
||||
let txt = "delegator claimed ";
|
||||
if (amount1 > thresholdStaking) {
|
||||
txt += amount1.toFixed(2) + " LPT staking rewards";
|
||||
if (amount2 > thresholdFees) {
|
||||
txt += " and "
|
||||
}
|
||||
}
|
||||
if (amount2 > thresholdFees) {
|
||||
txt += amount2.toFixed(4) + " Eth fee rewards";
|
||||
}
|
||||
txt += " from rounds " + eventObj.data.startRound + " to " + eventObj.data.endRound;
|
||||
finalEventList.push({
|
||||
eventType: "Claim",
|
||||
eventDescription: txt,
|
||||
eventCaller: eventObj.data.delegator.toLowerCase(),
|
||||
eventFrom: eventObj.data.delegate.toLowerCase(),
|
||||
eventTo: "",
|
||||
eventColour: claimColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
}
|
||||
// Always split off Reward as a separate Reward Event
|
||||
else if (eventObj.name === "Reward") {
|
||||
eventContainsReward = true;
|
||||
const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
let txt = "called reward worth " + amount1.toFixed(2) + " LPT";
|
||||
if (Math.floor(amount1) == 69) {
|
||||
txt += "... Nice!";
|
||||
}
|
||||
finalEventList.push({
|
||||
eventType: "Reward",
|
||||
eventDescription: txt,
|
||||
eventCaller: eventObj.data.transcoder.toLowerCase(),
|
||||
eventFrom: "",
|
||||
eventTo: "",
|
||||
eventColour: rewardColour,
|
||||
transactionHash: currentTx,
|
||||
transactionUrl: currentUrl
|
||||
});
|
||||
}
|
||||
// Extract useful info from other types of Event
|
||||
else if (eventObj.name === "Bond") {
|
||||
eventContainsBond = true;
|
||||
eventCaller = eventObj.data.delegator.toLowerCase();
|
||||
eventFrom = eventObj.data.oldDelegate.toLowerCase();
|
||||
eventTo = eventObj.data.newDelegate.toLowerCase();
|
||||
tmpAmount = parseFloat(eventObj.data.bondedAmount) / 1000000000000000000;
|
||||
tmpAmountOther = parseFloat(eventObj.data.additionalAmount) / 1000000000000000000;
|
||||
}
|
||||
else if (eventObj.name === "TranscoderActivated") {
|
||||
eventContainsTranscoderActivated = true;
|
||||
eventCaller = eventObj.data.transcoder.toLowerCase();
|
||||
tmpWhen = eventObj.data.activationRound;
|
||||
}
|
||||
else if (eventObj.name === "Unbond") {
|
||||
eventContainsUnbond = true;
|
||||
eventCaller = eventObj.data.delegator.toLowerCase();
|
||||
eventFrom = eventObj.data.delegate.toLowerCase();
|
||||
tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
tmpWhen = eventObj.data.withdrawRound;
|
||||
}
|
||||
else if (eventObj.name === "Rebond") {
|
||||
eventContainsRebond = true;
|
||||
eventCaller = eventObj.data.delegator.toLowerCase();
|
||||
eventTo = eventObj.data.delegate.toLowerCase();
|
||||
tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
}
|
||||
else if (eventObj.name === "TransferBond") {
|
||||
eventContainsTransferBond = true;
|
||||
eventFrom = eventObj.data.oldDelegator.toLowerCase();
|
||||
eventTo = eventObj.data.newDelegator.toLowerCase();
|
||||
tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
|
||||
} else {
|
||||
console.log("UNIMPLEMENTED: " + eventObj.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
// NOTE: We are throwing away the very oldest Event now, which should be fine.
|
||||
// We can fix this once above wall of text becomes a separate function
|
||||
return dispatch(setEvents(finalEventList));
|
||||
}
|
||||
return dispatch(receiveErrors(data));
|
||||
};
|
||||
|
||||
@ -6,355 +6,52 @@ 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 eventArrow;
|
||||
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>
|
||||
let eventCaller;
|
||||
if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
|
||||
obj.eventObj.eventFrom = "";
|
||||
}
|
||||
} else if (transactionName === "Claim") {
|
||||
if (transactionFrom == "0x0000000000000000000000000000000000000000") {
|
||||
console.log("EMPTY CLAIM " + thisURL);
|
||||
console.log(thisData);
|
||||
return null;
|
||||
if (obj.eventObj.eventTo === "0x0000000000000000000000000000000000000000") {
|
||||
obj.eventObj.eventTo = "";
|
||||
}
|
||||
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){
|
||||
if (obj.eventObj.eventTo && obj.eventObj.eventFrom) {
|
||||
eventArrow = <p>→</p>;
|
||||
}
|
||||
if (obj.eventObj.eventTo) {
|
||||
eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >{obj.eventObj.eventTo}</button>
|
||||
}
|
||||
if (obj.eventObj.eventFrom) {
|
||||
eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }} >{obj.eventObj.eventFrom}</button>
|
||||
}
|
||||
if (obj.eventObj.eventCaller) {
|
||||
eventCaller =
|
||||
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >{obj.eventObj.eventCaller}</button>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
|
||||
<div style={{ flexDirection: 'row', display: "flex" }}>
|
||||
<a href={"https://explorer.livepeer.org/accounts/" + transactionCaller}>
|
||||
<div className="rowAlignLeft" style={{ backgroundColor: obj.eventObj.eventColour, borderRadius: "1.2em", width: 'unset' }}>
|
||||
<div className="rowAlignLeft" style={{ width: 'unset' }}>
|
||||
<a href={obj.eventObj.transactionUrl}>
|
||||
<img alt="" src="arb.svg" width="30" height="30" />
|
||||
</a>
|
||||
<a href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
|
||||
<img alt="" src="livepeer.png" width="30" height="30" />
|
||||
</a>
|
||||
<div className="row">
|
||||
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionCaller)) }} >{transactionCaller}</button>
|
||||
{eventCaller}
|
||||
</div>
|
||||
<div className="rowAlignLeft">
|
||||
{obj.eventObj.eventDescription}
|
||||
</div>
|
||||
{eventSpecificInfo}
|
||||
<div className="row" style={{ width: 'unset'}}>
|
||||
{eventTo}
|
||||
{eventArrow}
|
||||
{eventFrom}
|
||||
<a href={thisURL}>
|
||||
<img alt="" src="arb.svg" width="30" height="30" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -7,32 +7,40 @@ import ReactPaginate from 'react-paginate';
|
||||
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 withdrawStakeColour = "rgba(115, 110, 22, 0.3)";
|
||||
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
||||
const claimColour = "rgba(77, 91, 42, 0.3)";
|
||||
const unbondColour = "rgba(122, 23, 51, 0.3)";
|
||||
const greyColour = "rgba(122, 128, 127, 0.3)";
|
||||
|
||||
const EventViewer = (obj) => {
|
||||
const [searchTerm, setSearchTerm] = useState(obj.prefill || "");
|
||||
const [filterActivated, setFilterActivated] = useState(false);
|
||||
const [rewardActivated, setRewardActivated] = useState(false);
|
||||
const [updateActivated, setUpdateActivated] = useState(false);
|
||||
const [withdrawActivated, setWithdrawActivated] = useState(false);
|
||||
const [stakeActivated, setStakeActivated] = useState(false);
|
||||
const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(false);
|
||||
const [unbondActivated, setUnbondActivated] = useState(false);
|
||||
const [filterActivated, setFilterActivated] = useState(true);
|
||||
const [rewardActivated, setRewardActivated] = useState(true);
|
||||
const [updateActivated, setUpdateActivated] = useState(true);
|
||||
const [withdrawActivated, setWithdrawActivated] = useState(true);
|
||||
const [stakeActivated, setStakeActivated] = useState(true);
|
||||
const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(true);
|
||||
const [unbondActivated, setUnbondActivated] = useState(true);
|
||||
console.log("Rendering EventViewer");
|
||||
let unfiltered = 0;
|
||||
|
||||
let filterActivatedColour;
|
||||
filterActivatedColour = filterActivated ? activationColour : greyColour;
|
||||
let rewardActivatedColour;
|
||||
rewardActivatedColour = rewardActivated ? rewardColour : greyColour;
|
||||
let updateActivatedColour;
|
||||
updateActivatedColour = updateActivated ? updateColour : greyColour;
|
||||
let withdrawActivatedColour;
|
||||
withdrawActivatedColour = withdrawActivated ? withdrawStakeColour : greyColour;
|
||||
let stakeActivatedColour;
|
||||
stakeActivatedColour = stakeActivated ? stakeColour : greyColour;
|
||||
let delegatorActivatedColour;
|
||||
delegatorActivatedColour = delegatorRewardActivated ? claimColour : greyColour;
|
||||
let unbondActivatedColour;
|
||||
unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
|
||||
|
||||
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: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
|
||||
<div className="fixed-container" style={{ padding: 0, width: '300px' }}>
|
||||
@ -46,78 +54,113 @@ const EventViewer = (obj) => {
|
||||
<div className="content-wrapper" style={{ alignItems: 'stretch', width: '100%' }}>
|
||||
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
|
||||
{obj.events.slice(0).reverse().map((eventObj, idx) => {
|
||||
// New transaction found
|
||||
if (currentTx != eventObj.transactionHash) {
|
||||
// Save old event data
|
||||
eventBundle = 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;
|
||||
{obj.events.map((eventObj, idx) => {
|
||||
// Filter name on from, to, caller
|
||||
if (searchTerm !== "") {
|
||||
let isFiltered = true;
|
||||
if (eventObj.eventCaller.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
|
||||
if (eventObj.eventFrom.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
|
||||
if (eventObj.eventTo.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
|
||||
if (isFiltered) return null;
|
||||
}
|
||||
// Push if not completely filtered out
|
||||
if (eventBundle.length) {
|
||||
// Filter Events on filter buttons
|
||||
let isFiltered = true;
|
||||
// Check boolean filters on eventObj.eventType
|
||||
let count = 0;
|
||||
if (filterActivated) {
|
||||
if (eventObj.eventType === "Activate") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (rewardActivated) {
|
||||
if (eventObj.eventType === "Reward") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (updateActivated) {
|
||||
if (eventObj.eventType === "Update") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (withdrawActivated) {
|
||||
if (eventObj.eventType === "Withdraw") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (stakeActivated) {
|
||||
if (eventObj.eventType === "Stake") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (stakeActivated) {
|
||||
if (eventObj.eventType === "Migrate") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (unbondActivated) {
|
||||
if (eventObj.eventType === "Unbond") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (delegatorRewardActivated) {
|
||||
if (eventObj.eventType === "Claim") {
|
||||
isFiltered = false;
|
||||
}
|
||||
count++;
|
||||
}
|
||||
if (isFiltered && count) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (unfiltered < 500) {
|
||||
unfiltered++;
|
||||
return <EventButton
|
||||
key={eventObj.transactionHash + idx}
|
||||
transactionUrl={finalUrl}
|
||||
transactionHash={finalHash}
|
||||
events={eventBundle}
|
||||
idx={finalIdx}
|
||||
searchTerm={searchTerm}
|
||||
filterActivated={filterActivated}
|
||||
rewardActivated={rewardActivated}
|
||||
updateActivated={updateActivated}
|
||||
withdrawActivated={withdrawActivated}
|
||||
stakeActivated={stakeActivated}
|
||||
delegatorRewardActivated={delegatorRewardActivated}
|
||||
unbondActivated={unbondActivated}
|
||||
eventObj={eventObj}
|
||||
/>
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
<div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
|
||||
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
|
||||
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
|
||||
setFilterActivated(!filterActivated);
|
||||
}}>
|
||||
<h3>Activated</h3>
|
||||
</button>
|
||||
<button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
|
||||
<button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
|
||||
setRewardActivated(!rewardActivated);
|
||||
}}>
|
||||
<h3>Reward</h3>
|
||||
</button>
|
||||
<button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
|
||||
<button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
|
||||
setUpdateActivated(!updateActivated);
|
||||
}}>
|
||||
<h3>Update</h3>
|
||||
</button>
|
||||
<button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
|
||||
<button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => {
|
||||
setWithdrawActivated(!withdrawActivated);
|
||||
}}>
|
||||
<h3>Withdraw</h3>
|
||||
</button>
|
||||
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
|
||||
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
|
||||
setStakeActivated(!stakeActivated);
|
||||
}}>
|
||||
<h3>Stake</h3>
|
||||
</button>
|
||||
<button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: claimColour }} onClick={() => {
|
||||
<button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
|
||||
setDelegatorRewardActivated(!delegatorRewardActivated);
|
||||
}}>
|
||||
<h3>Claim</h3>
|
||||
</button>
|
||||
<button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondColour }} onClick={() => {
|
||||
<button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
|
||||
setUnbondActivated(!unbondActivated);
|
||||
}}>
|
||||
<h3>Unbond</h3>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user