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

MVP getting O info using livepeer subgraph api

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-03 10:51:40 +01:00
parent 2c537b0f4c
commit 988904d4d0
9 changed files with 211 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/routes/livepeer.js
View File

@ -70,8 +70,6 @@ const orchQuery = gql`
}
rewardCut
feeShare
pricePerSegment
pendingPricePerSegment
pendingFeeShare
pendingRewardCut
totalStake

13
src/actions/livepeer.js
View File

@ -4,6 +4,7 @@ import { receiveErrors } from "./error";
export const RECEIVE_QUOTES = "RECEIVE_QUOTES";
export const RECEIVE_BLOCKCHAIN_DATA = "RECEIVE_BLOCKCHAIN_DATA";
export const RECEIVE_EVENTS = "RECEIVE_EVENTS";
export const RECEIVE_ORCHESTRATOR = "RECEIVE_ORCHESTRATOR";
const setQuotes = message => ({
type: RECEIVE_QUOTES, message
@ -14,6 +15,9 @@ const setBlockchainData = message => ({
const setEvents = message => ({
type: RECEIVE_EVENTS, message
});
const setCurrentOrchestratorInfo = message => ({
type: RECEIVE_ORCHESTRATOR, message
});
export const getQuotes = () => async dispatch => {
const response = await apiUtil.getQuotes();
@ -41,3 +45,12 @@ export const getEvents = () => async dispatch => {
}
return dispatch(receiveErrors(data));
};
export const getCurrentOrchestratorInfo = () => async dispatch => {
const response = await apiUtil.getCurrentOrchestratorInfo();
const data = await response.json();
if (response.ok) {
return dispatch(setCurrentOrchestratorInfo(data));
}
return dispatch(receiveErrors(data));
};

2
src/eventButton.js
View File

@ -36,7 +36,7 @@ const EventButton = (obj) => {
</div>
} else if (obj.name == "TranscoderUpdate") {
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(215, 15, 0, 0.3)' }}>
<p>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)}</p>
<p>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)}%</p>
</div>
} else if (obj.name == "TranscoderActivated") {
eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 255, 1, 0.3)' }}>

138
src/grafana.js
View File

@ -1,25 +1,102 @@
import React, { useEffect, useState } from "react";
import * as React from "react";
import './style.css';
import {
Navigate, useParams
Navigate
} from "react-router-dom";
import { connect } from "react-redux";
import {
getQuotes, getCurrentOrchestratorInfo
} from "./actions/livepeer";
const Grafana = () => {
let params = useParams();
const [redirectToHome, setRedirectToHome] = useState(false);
const mapStateToProps = (state) => {
return {
session: state.session,
userstate: state.userstate,
errors: state.errors,
livepeer: state.livepeerstate
}
};
useEffect(() => {
const mapDispatchToProps = dispatch => ({
getQuotes: () => dispatch(getQuotes()),
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
});
}, [])
class Grafana extends React.Component {
state = {
redirectToHome: false,
};
if (redirectToHome) {
constructor(props) {
super(props);
}
render() {
if (this.state.redirectToHome) {
return <Navigate push to="/" />;
}
let lptPrice = 0;
let ethPrice = 0;
let lptPriceChange24h = 0;
let ethPriceChange24h = 0;
if (this.props.livepeer.quotes) {
if (this.props.livepeer.quotes.LPT) {
lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
}
if (this.props.livepeer.quotes.ETH) {
ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
}
}
console.log(this.props.livepeer);
let rewardCut = 0;
let feeCut = 0;
let totalStake = 0;
let totalVolumeETH = 0;
let totalVolumeUSD = 0;
let delegators = [];
let delegatorsTotalStake = 0;
let selfStake = 0;
let selfStakeRatio = 0;
if (this.props.livepeer.thisOrchestrator) {
if (this.props.livepeer.thisOrchestrator.rewardCut) {
rewardCut = (this.props.livepeer.thisOrchestrator.rewardCut / 10000).toFixed(2);
}
if (this.props.livepeer.thisOrchestrator.feeShare) {
feeCut = (100 - (this.props.livepeer.thisOrchestrator.feeShare / 10000)).toFixed(2);
}
if (this.props.livepeer.thisOrchestrator.totalStake) {
totalStake = parseFloat(this.props.livepeer.thisOrchestrator.totalStake).toFixed(2);
}
if (this.props.livepeer.thisOrchestrator.totalVolumeETH) {
totalVolumeETH = parseFloat(this.props.livepeer.thisOrchestrator.totalVolumeETH * 1).toFixed(4);
}
if (this.props.livepeer.thisOrchestrator.totalVolumeUSD) {
totalVolumeUSD = parseFloat(this.props.livepeer.thisOrchestrator.totalVolumeUSD * 1).toFixed(2);
}
if (this.props.livepeer.thisOrchestrator.delegators && this.props.livepeer.thisOrchestrator.delegator) {
delegators = this.props.livepeer.thisOrchestrator.delegators;
selfStake = parseFloat(this.props.livepeer.thisOrchestrator.delegator.bondedAmount);
{
delegators.map((delObj, idx) => {
delegatorsTotalStake += parseFloat(delObj.bondedAmount);
})
}
selfStakeRatio = ((selfStake / delegatorsTotalStake) * 100).toFixed(2);
delegatorsTotalStake = delegatorsTotalStake.toFixed(2);
selfStake = selfStake.toFixed(2);
}
}
return (
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<button className="homeButton" onClick={() => {
setRedirectToHome(true);
this.setState({ redirectToHome: true });
}}>
<img alt="" src="/livepeer.png" width="100em" height="100em" />
</button>
@ -32,12 +109,39 @@ const Grafana = () => {
<h2> <img alt="" src="livepeer.png" width="30" height="30" /> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
</div>
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
<div className="flexContainer" style={{ justifyContent: "center" }}>
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572081" height="200" frameBorder="0"></iframe>
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572082" height="200" frameBorder="0"></iframe>
<div className="hostInfo" style={{ margin: 0, padding: 0 }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row">
<h3>Price Info</h3>
</div>
<div className="row">
<img alt="" src="livepeer.png" width="30" height="30" />
<p>${lptPrice}</p>
<p>({lptPriceChange24h}%)</p>
</div>
<div className="row">
<img alt="" src="eth.png" width="30" height="30" />
<p>${ethPrice}</p>
<p>({ethPriceChange24h}%)</p>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row">
<h3>Orchestrator Info</h3>
</div>
<div className="row">
<p>Reward Cut {rewardCut}%</p>
<p>Fee Cut {feeCut}%</p>
</div>
<div className="row">
<p>Total Stake {totalStake} LPT</p>
<p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
</div>
<div className="row">
<p>Self stake {selfStake} LPT (Ratio of {selfStakeRatio}%)</p>
<p>Total stake {delegatorsTotalStake} LPT</p>
</div>
</div>
<div className="flexContainer" style={{ justifyContent: "center" }}>
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572014" height="200" frameBorder="0"></iframe>
</div>
<div className="flexContainer" style={{ justifyContent: "center" }}>
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
@ -66,6 +170,10 @@ const Grafana = () => {
</div>
</div>
);
}
}
export default Grafana;
export default connect(
mapStateToProps,
mapDispatchToProps
)(Grafana);

8
src/livepeer.js
View File

@ -3,10 +3,9 @@ import './style.css';
import {
Navigate
} from "react-router-dom";
import ScrollContainer from 'react-indiana-drag-scroll';
import { connect } from "react-redux";
import {
getQuotes, getBlockchainData, getEvents
getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo
} from "./actions/livepeer";
import EventViewer from "./eventViewer";
@ -22,7 +21,8 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = dispatch => ({
getQuotes: () => dispatch(getQuotes()),
getBlockchainData: () => dispatch(getBlockchainData()),
getEvents: () => dispatch(getEvents())
getEvents: () => dispatch(getEvents()),
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
});
class Livepeer extends React.Component {
@ -38,9 +38,11 @@ class Livepeer extends React.Component {
this.props.getQuotes();
this.props.getBlockchainData();
this.props.getEvents();
this.props.getCurrentOrchestratorInfo();
}
render() {
console.log(this.props.livepeer.thisOrchestrator);
if (this.state.redirectToHome) {
return <Navigate push to="/" />;
}

13
src/loadingScreen.js
View File

@ -3,6 +3,9 @@ import { connect } from "react-redux";
import {
getVisitorStats
} from "./actions/user";
import {
getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo
} from "./actions/livepeer";
import { login } from "./actions/session";
const mapStateToProps = (state) => {
@ -15,7 +18,11 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = dispatch => ({
getVisitorStats: () => dispatch(getVisitorStats()),
login: () => dispatch(login())
login: () => dispatch(login()),
getQuotes: () => dispatch(getQuotes()),
getBlockchainData: () => dispatch(getBlockchainData()),
getEvents: () => dispatch(getEvents()),
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
});
@ -23,6 +30,10 @@ class Startup extends React.Component {
componentDidMount() {
this.props.login();
this.props.getVisitorStats();
this.props.getQuotes();
this.props.getBlockchainData();
this.props.getEvents();
this.props.getCurrentOrchestratorInfo();
}
render() {
return this.props.children;

5
src/reducers/livepeer/livepeerstate.js
View File

@ -1,7 +1,8 @@
import {
RECEIVE_QUOTES,
RECEIVE_BLOCKCHAIN_DATA,
RECEIVE_EVENTS
RECEIVE_EVENTS,
RECEIVE_ORCHESTRATOR
} from "../../actions/livepeer";
export default (state = {}, { type, message }) => {
@ -13,6 +14,8 @@ export default (state = {}, { type, message }) => {
return { ...state, blockchains: message };
case RECEIVE_EVENTS:
return { ...state, events: message };
case RECEIVE_ORCHESTRATOR:
return { ...state, thisOrchestrator: message.transcoders[0] };
default:
return { ...state };
}

6
src/style.css
View File

@ -189,7 +189,7 @@ svg {
color: rgba(162, 161, 255, 0.5);
}
.hostinfo {
.hostInfo {
cursor: default;
text-align: start;
padding: 10px;
@ -197,9 +197,9 @@ svg {
user-select: text;
margin-top: 0;
margin-bottom: 0;
font-size: x-small;
font-size: small;
color: rgba(15, 15, 15, 0.8750);
background-color: rgba(255, 255, 255, 0.06);
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);

9
src/util/livepeer.js
View File

@ -26,3 +26,12 @@ export const getEvents = () => (
}
})
);
export const getCurrentOrchestratorInfo = () => (
fetch("api/livepeer/getOrchestrator", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
);