From 2681d2c4b24c8526599e944f38c9e14121cc4c9f Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Thu, 3 Mar 2022 20:24:58 +0100 Subject: [PATCH] MVP Event Viewer and Buttons --- src/eventButton.js | 177 +++++++++++++++++++++++++++++++++------------ src/eventViewer.js | 48 +++++++----- src/grafana.js | 4 +- src/livepeer.js | 1 - 4 files changed, 164 insertions(+), 66 deletions(-) diff --git a/src/eventButton.js b/src/eventButton.js index ce08b72..be55db2 100644 --- a/src/eventButton.js +++ b/src/eventButton.js @@ -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 =
-

(Round {obj.data.endRound}) Claim: {obj.data.delegator} earned {(obj.data.rewards / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}

-
- } else if (obj.name == "Unbond") { - eventSpecificInfo =
-

(Round {obj.data.withdrawRound}) Unbond: {obj.data.delegator} unbonded {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}

-
- } else if (obj.name == "TransferBond") { - eventSpecificInfo =
-

TransferBond: transfered bond worth {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth from {obj.data.oldDelegator} to {obj.data.newDelegator}

-
- } else if (obj.name == "Bond") { - eventSpecificInfo =
-

{obj.data.delegator} delegated {(obj.data.bondedAmount / 1000000000000000000).toFixed(4)} LPT from {obj.data.oldDelegate} to {obj.data.newDelegate}

-
- } else if (obj.name == "Rebond") { - eventSpecificInfo =
-

Rebond: {obj.data.delegator} @ {obj.data.delegate}

-
- } else if (obj.name == "WithdrawFees") { - eventSpecificInfo =
-

{obj.data.recipient} claimed stake

-
- } else if (obj.name == "WithdrawStake") { - eventSpecificInfo =
-

{obj.data.delegator} withdrew stake worth {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT in round {obj.data.withdrawRound}

-
- } else if (obj.name == "Reward") { - eventSpecificInfo =
-

O {obj.data.transcoder} called reward for {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT

-
- } else if (obj.name == "TranscoderUpdate") { - eventSpecificInfo =
-

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)}%

-
- } else if (obj.name == "TranscoderActivated") { - eventSpecificInfo =
-

O {obj.data.transcoder} activated and will become active in {obj.data.activationRound}

-
+ if (transactionName == "Reward") { + if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) { + eventSpecificInfo = +
+

called reward worth {transactionAmount.toFixed(2)} LPT. nice

+
+ } else { + eventSpecificInfo = +
+

called reward worth {transactionAmount.toFixed(2)} LPT

+
+ } + }else if (transactionName == "Update") { + eventSpecificInfo = +
+

changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%

+
+ }else if (transactionName == "Stake") { + eventSpecificInfo = +
+

changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount * 7e-18).toFixed(2)} LPT

+
+ }else if (transactionName == "Withdraw") { + eventSpecificInfo = +
+

withdrew {(transactionAmount * 7e-18).toFixed(2)} LPT in round {transactionWhen}

+
+ } else if (transactionName == "Activated") { + if (hasBondTransaction) { + eventSpecificInfo = +
+

{transactionCaller} activated with a self stake of {(transactionAmount * 7e-18).toFixed(2)} LPT and will become active in round {transactionWhen}

+
+ } else { + // If there was no bond transaction, display fewer information + eventSpecificInfo = +
+

reactivated and will become active in round {transactionWhen}

+
+ } } else { - console.log(obj); + console.log(thisData); eventSpecificInfo =
-

UNIMPLEMENTED: {obj.event}

+

UNIMPLEMENTED

} + // IF ON MOBILE + // transactionCaller.substring(0,8)+"..." + return ( -
- - {obj.idx}: {eventSpecificInfo} - +
+ + +

{transactionCaller}

+ + {eventSpecificInfo} +
diff --git a/src/eventViewer.js b/src/eventViewer.js index aa11b6f..93b70dd 100644 --- a/src/eventViewer.js +++ b/src/eventViewer.js @@ -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 (
{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; } - return + // Push if not completely filtered out + if (eventBundle.length){ + return + } })}
diff --git a/src/grafana.js b/src/grafana.js index 60e353b..e8dc521 100644 --- a/src/grafana.js +++ b/src/grafana.js @@ -83,10 +83,10 @@ class Grafana extends React.Component {
- +
- +
diff --git a/src/livepeer.js b/src/livepeer.js index 812977b..62a67d5 100644 --- a/src/livepeer.js +++ b/src/livepeer.js @@ -42,7 +42,6 @@ class Livepeer extends React.Component { } render() { - console.log(this.props.livepeer.thisOrchestrator); if (this.state.redirectToHome) { return ; }