From 019f8ddb3b78be0d9cd951c96811b9430c7a1fce Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Thu, 3 Mar 2022 22:25:54 +0100 Subject: [PATCH] Fixes and Orchestrator info added --- backend/src/routes/livepeer.js | 12 ++++++++ src/actions/livepeer.js | 1 + src/eventButton.js | 48 ++++++++++++++++------------- src/eventViewer.js | 3 +- src/livepeer.js | 31 ++++++++----------- src/orchestratorViewer.js | 55 ++++++++++++++++++++++------------ src/style.css | 30 ++++++++++++++----- src/util/livepeer.js | 5 ++-- 8 files changed, 114 insertions(+), 71 deletions(-) diff --git a/backend/src/routes/livepeer.js b/backend/src/routes/livepeer.js index 5ad3245..902c214 100644 --- a/backend/src/routes/livepeer.js +++ b/backend/src/routes/livepeer.js @@ -240,6 +240,7 @@ apiRouter.get("/getEvents", async (req, res) => { }); const parseOrchestrator = async function (reqAddr) { + reqAddr = reqAddr.toLowerCase(); const now = new Date().getTime(); // Default assume it's the first time we request this Orchestrator let wasCached = false; @@ -248,6 +249,8 @@ const parseOrchestrator = async function (reqAddr) { // First get cached object for (var orch of orchestratorCache) { if (orch.addr == reqAddr) { + console.log("found cached obj"); + console.log(orch); wasCached = true; orchestratorObj = orch; break; @@ -256,6 +259,9 @@ const parseOrchestrator = async function (reqAddr) { if (wasCached) { if (now - orch.lastGet < timeoutTheGraph) { needsUpdate = false; + console.log("cached obj is up to date"); + }else{ + console.log("cached obj needs update"); } } if (!wasCached || needsUpdate) { @@ -300,17 +306,23 @@ const parseOrchestrator = async function (reqAddr) { } `; orchestratorObj = JSON.stringify(await request("https://api.thegraph.com/subgraphs/name/livepeer/arbitrum-one", orchQuery)); + console.log("downloaded new obj"); + console.log(orchestratorObj); if (wasCached) { for (var orch of orchestratorCache) { if (orch.addr == requestedOrchestrator) { + console.log("modifying existing obj in cache"); orch = orchestratorObj; break; } } } else { + console.log("pushing this obj to cache"); orchestratorCache.push(orchestratorObj); } } + console.log("returning obj"); + console.log(orchestratorObj); return orchestratorObj; } diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js index 3627484..b6c11ac 100644 --- a/src/actions/livepeer.js +++ b/src/actions/livepeer.js @@ -62,6 +62,7 @@ export const getCurrentOrchestratorInfo = () => async dispatch => { export const getOrchestratorInfo = (orchAddr) => async dispatch => { const response = await apiUtil.getOrchestratorInfo(orchAddr); const data = await response.json(); + console.log(data); if (response.ok) { return dispatch(setOrchestratorInfo(data)); } diff --git a/src/eventButton.js b/src/eventButton.js index 4aa1928..932569c 100644 --- a/src/eventButton.js +++ b/src/eventButton.js @@ -29,9 +29,9 @@ const EventButton = (obj) => { 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; + transactionCaller = eventObj.data.delegator.toLowerCase(); + transactionFrom = eventObj.data.oldDelegate.toLowerCase(); + transactionTo = eventObj.data.newDelegate.toLowerCase(); transactionAmount = parseFloat(eventObj.data.bondedAmount); transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount); hasBondTransaction = true; @@ -41,7 +41,7 @@ const EventButton = (obj) => { transactionName = "Activated"; transactionWhen = eventObj.data.activationRound; if (!hasBondTransaction) { - transactionCaller = eventObj.data.transcoder; + transactionCaller = eventObj.data.transcoder.toLowerCase(); } thisColour = activationColour; isOnlyBond = false; @@ -49,7 +49,7 @@ const EventButton = (obj) => { // TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT if (eventObj.name == "Reward") { transactionName = "Reward"; - transactionCaller = eventObj.data.transcoder; + transactionCaller = eventObj.data.transcoder.toLowerCase(); transactionAmount = eventObj.data.amount / 1000000000000000000; thisColour = rewardColour; isOnlyBond = false; @@ -57,7 +57,7 @@ const EventButton = (obj) => { // TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut if (eventObj.name == "TranscoderUpdate") { transactionName = "Update"; - transactionCaller = eventObj.data.transcoder; + transactionCaller = eventObj.data.transcoder.toLowerCase(); transactionAmount = eventObj.data.rewardCut / 10000; transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000); thisColour = updateColour; @@ -66,7 +66,7 @@ const EventButton = (obj) => { // WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut if (eventObj.name == "WithdrawStake") { transactionName = "Withdraw"; - transactionCaller = eventObj.data.delegator; + transactionCaller = eventObj.data.delegator.toLowerCase(); transactionAmount = eventObj.data.amount / 1000000000000000000; transactionWhen = eventObj.data.withdrawRound; thisColour = withdrawStakeColour; @@ -84,47 +84,51 @@ const EventButton = (obj) => { 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") { if (transactionFrom == "0x0000000000000000000000000000000000000000") { eventSpecificInfo = -
-

staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to {transactionTo}

+
+

staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to

+
} else { eventSpecificInfo = -
-

changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT

+
+

moved {(transactionAmount / 1000000000000000000).toFixed(2)} LPT stake:

+ +

to

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

withdrew {(transactionAmount / 1000000000000000000).toFixed(2)} LPT in round {transactionWhen}

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

{transactionCaller} activated with a self stake of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT and will become active in round {transactionWhen}

+
+

activated with a self stake of {(transactionAmount / 1000000000000000000).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}

} @@ -140,10 +144,12 @@ const EventButton = (obj) => { return (
- +
-

{transactionCaller}

- +
+ +
+
{eventSpecificInfo} diff --git a/src/eventViewer.js b/src/eventViewer.js index 93b70dd..13d5424 100644 --- a/src/eventViewer.js +++ b/src/eventViewer.js @@ -14,7 +14,7 @@ const EventViewer = (obj) => { let finalHash = ""; let finalIdx = 0; return ( -
+
@@ -50,6 +50,7 @@ const EventViewer = (obj) => { transactionHash={finalHash} events={eventBundle} idx={finalIdx} + setOrchFunction={obj.setOrchFunction} /> } })} diff --git a/src/livepeer.js b/src/livepeer.js index 62a67d5..ddc68e6 100644 --- a/src/livepeer.js +++ b/src/livepeer.js @@ -5,9 +5,10 @@ import { } from "react-router-dom"; import { connect } from "react-redux"; import { - getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo + getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getOrchestratorInfo } from "./actions/livepeer"; import EventViewer from "./eventViewer"; +import Orchestrator from "./orchestratorViewer"; const mapStateToProps = (state) => { return { @@ -22,7 +23,8 @@ const mapDispatchToProps = dispatch => ({ getQuotes: () => dispatch(getQuotes()), getBlockchainData: () => dispatch(getBlockchainData()), getEvents: () => dispatch(getEvents()), - getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo()) + getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo()), + getOrchestratorInfo: (addr) => dispatch(getOrchestratorInfo(addr)) }); class Livepeer extends React.Component { @@ -120,9 +122,14 @@ class Livepeer extends React.Component { eventsList = this.props.livepeer.events; } + let thisOrchObj = this.props.livepeer.thisOrchestrator; + if (this.props.livepeer.selectedOrchestrator){ + thisOrchObj = this.props.livepeer.selectedOrchestrator; + } + return (
-
+
+
-
-
-

Price Info

-
-
- -

${lptPrice}

-

({lptPriceChange24h}%)

-
-
- -

${ethPrice}

-

({ethPriceChange24h}%)

-
-

Smart contract prices

@@ -163,7 +156,7 @@ class Livepeer extends React.Component {
- +
); } diff --git a/src/orchestratorViewer.js b/src/orchestratorViewer.js index f35e42a..88e7532 100644 --- a/src/orchestratorViewer.js +++ b/src/orchestratorViewer.js @@ -1,4 +1,5 @@ import React from "react"; +import ScrollContainer from "react-indiana-drag-scroll"; const Orchestrator = (obj) => { let rewardCut = 0; @@ -9,6 +10,8 @@ const Orchestrator = (obj) => { let delegators = []; let selfStake = 0; let selfStakeRatio = 0; + let thisUrl = ""; + let thisID = ""; if (obj.thisOrchestrator) { if (obj.thisOrchestrator.rewardCut) { rewardCut = (obj.thisOrchestrator.rewardCut / 10000).toFixed(2); @@ -30,14 +33,23 @@ const Orchestrator = (obj) => { selfStake = parseFloat(obj.thisOrchestrator.delegator.bondedAmount); selfStakeRatio = ((selfStake / totalStake) * 100).toFixed(2); selfStake = selfStake.toFixed(2); + thisID = obj.thisOrchestrator.delegator.id; + thisUrl = "https://explorer.livepeer.org/accounts/" + thisID; } } return ( -
-
+
+ + ) } diff --git a/src/style.css b/src/style.css index 40c90aa..5abacf0 100644 --- a/src/style.css +++ b/src/style.css @@ -1,9 +1,10 @@ -a:hover, a:visited, a:link, a:active{ +.selectOrch:hover, a:hover, a:visited, a:link, a:active{ text-decoration: none; color: rgba(0, 0, 0, 0.875); text-align: center; justify-content: center; - align-items: center; + align-items: copy; + cursor: pointer; } img { @@ -41,9 +42,11 @@ h2, h3, h1, h4, h5, h6 { justify-content: space-evenly; } -a { +.selectOrch, a { text-shadow: 0.5px 0.5px 0.8px #948dff; color: #1a1b26; + background-color: transparent; + border: none; } p { @@ -195,14 +198,14 @@ svg { padding: 10px; margin: 10px; user-select: text; - margin-top: 0; - margin-bottom: 0; font-size: small; color: rgba(15, 15, 15, 0.8750); background-color: rgba(169, 177, 214, 0.8); -webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); -moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); + display: flex; + flex-direction: row; } .flexContainer { @@ -232,10 +235,8 @@ svg { .strokeSmoll { box-sizing: border-box; - height: 100%; - paddin: 0; + padding: 0; margin: 0; - width: 100%; display: flex; align-items: center; justify-content: center; @@ -243,6 +244,19 @@ svg { z-index: 2; } +.strokeSmollLeft { + padding: 0; + margin: 0; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + justify-content: middle; + vertical-align: middle; + flex-direction: column; + z-index: 2; +} + .row { box-sizing: border-box; width: 100%; diff --git a/src/util/livepeer.js b/src/util/livepeer.js index 167b8b0..c93673c 100644 --- a/src/util/livepeer.js +++ b/src/util/livepeer.js @@ -37,9 +37,8 @@ export const getCurrentOrchestratorInfo = () => ( ); export const getOrchestratorInfo = (orchAddr) => ( - fetch("api/livepeer/getOrchestrator", { - method: "POST", - body: JSON.stringify(orchAddr), + fetch("api/livepeer/getOrchestrator/" + orchAddr, { + method: "GET", headers: { "Content-Type": "application/json" }