mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 02:35:09 +02:00
MVP getting O info using livepeer subgraph api
This commit is contained in:
parent
2c537b0f4c
commit
988904d4d0
@ -70,8 +70,6 @@ const orchQuery = gql`
|
||||
}
|
||||
rewardCut
|
||||
feeShare
|
||||
pricePerSegment
|
||||
pendingPricePerSegment
|
||||
pendingFeeShare
|
||||
pendingRewardCut
|
||||
totalStake
|
||||
|
||||
@ -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();
|
||||
@ -40,4 +44,13 @@ export const getEvents = () => async dispatch => {
|
||||
return dispatch(setEvents(data));
|
||||
}
|
||||
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));
|
||||
};
|
||||
@ -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)' }}>
|
||||
|
||||
220
src/grafana.js
220
src/grafana.js
@ -1,71 +1,179 @@
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [])
|
||||
|
||||
if (redirectToHome) {
|
||||
return <Navigate push to="/" />;
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
session: state.session,
|
||||
userstate: state.userstate,
|
||||
errors: state.errors,
|
||||
livepeer: state.livepeerstate
|
||||
}
|
||||
return (
|
||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
||||
<button className="homeButton" onClick={() => {
|
||||
setRedirectToHome(true);
|
||||
}}>
|
||||
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
||||
</button>
|
||||
</div>
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
getQuotes: () => dispatch(getQuotes()),
|
||||
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
|
||||
});
|
||||
|
||||
class Grafana extends React.Component {
|
||||
state = {
|
||||
redirectToHome: false,
|
||||
};
|
||||
|
||||
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="flexContainer">
|
||||
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
|
||||
<div className="stroke roundedOpaque" style={{}}>
|
||||
<div className="row">
|
||||
<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>
|
||||
<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>
|
||||
</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=23763572056" 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=23763572032" 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&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
|
||||
</div>
|
||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
||||
<button className="homeButton" onClick={() => {
|
||||
this.setState({ redirectToHome: true });
|
||||
}}>
|
||||
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
||||
<div className="flexContainer">
|
||||
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
|
||||
<div className="stroke roundedOpaque" style={{}}>
|
||||
<div className="row">
|
||||
<a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
|
||||
<button className="waveButton">
|
||||
<img alt="" src="grafana.png" width="30" height="30" />
|
||||
<p>Full Statistics</p>
|
||||
</button>
|
||||
</a>
|
||||
<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="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>
|
||||
<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>
|
||||
</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=23763572056" 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=23763572032" 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&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
|
||||
</div>
|
||||
<div className="row">
|
||||
<a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
|
||||
<button className="waveButton">
|
||||
<img alt="" src="grafana.png" width="30" height="30" />
|
||||
<p>Full Statistics</p>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Grafana;
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Grafana);
|
||||
|
||||
@ -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="/" />;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -25,4 +25,13 @@ export const getEvents = () => (
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
export const getCurrentOrchestratorInfo = () => (
|
||||
fetch("api/livepeer/getOrchestrator", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
);
|
||||
Loading…
x
Reference in New Issue
Block a user