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

Reoranisation of code

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-12 17:33:25 +01:00
parent 3f1a6ef445
commit 38b325cf12
16 changed files with 334 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -1,8 +1,8 @@
import * as React from "react";
import Home from './home.js';
import Startup from './loadingScreen.js';
import Grafana from './grafana.js';
import Livepeer from './livepeer.js';
import Home from './pages/home.js';
import Startup from './pages/loadingScreen.js';
import Grafana from './pages/grafana.js';
import Livepeer from './pages/livepeer.js';
import {
BrowserRouter as Router,

4
src/BlockViewer.js → src/components/BlockViewer.js
View File

@ -7,11 +7,11 @@ const Block = (obj) => {
const [thisDate, thisTime] = dateObj.toISOString().split('T');
return (
<div className="rowAlignLeft" style={{ width: '100%', marginTop: '1em' }}>
<a className="selectOrch" style={{cursor: 'alias'}} target="_blank" href={obj.url}>
<a className="selectOrch" style={{cursor: 'alias'}} target="_blank" rel="noopener noreferrer" href={obj.url}>
<img alt="" src="arb.svg" width="30em" height="30em" />
</a>
<span className="rowAlignRight elipsText">
<a className="selectOrch" style={{cursor: 'alias'}} target="_blank" href={"https://arbiscan.io/block/" + obj.block}>
<a className="selectOrch" style={{cursor: 'alias'}} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}>
🔗{obj.block}
</a>
<p className="darkText">📅{thisDate} - {thisTime.split('.')[0]} </p>

115
src/components/ContractPrices.js Normal file
View File

@ -0,0 +1,115 @@
import React from "react";
import Stat from "../components/statViewer";
const ContractPrices = (obj) => {
let ethPrice = 0;
if (obj.quotes) {
if (obj.quotes.ETH) {
ethPrice = obj.quotes.ETH.price.toFixed(2);
}
}
let l1GasFeeInGwei = 0;
let l2GasFeeInGwei = 0;
let redeemRewardCostL1 = 0;
let redeemRewardCostL2 = 0;
let claimTicketCostL1 = 0;
let claimTicketCostL2 = 0;
let withdrawFeeCostL1 = 0;
let withdrawFeeCostL2 = 0;
let stakeFeeCostL1 = 0;
let stakeFeeCostL2 = 0;
let commissionFeeCostL1 = 0;
let commissionFeeCostL2 = 0;
let serviceUriFeeCostL1 = 0;
let serviceUriFeeCostL2 = 0;
if (obj.blockchains) {
l1GasFeeInGwei = obj.blockchains.l1GasFeeInGwei;
l2GasFeeInGwei = obj.blockchains.l2GasFeeInGwei;
redeemRewardCostL1 = obj.blockchains.redeemRewardCostL1;
redeemRewardCostL2 = obj.blockchains.redeemRewardCostL2;
claimTicketCostL1 = obj.blockchains.claimTicketCostL1;
claimTicketCostL2 = obj.blockchains.claimTicketCostL2;
withdrawFeeCostL1 = obj.blockchains.withdrawFeeCostL1;
withdrawFeeCostL2 = obj.blockchains.withdrawFeeCostL2;
stakeFeeCostL1 = obj.blockchains.stakeFeeCostL1;
stakeFeeCostL2 = obj.blockchains.stakeFeeCostL2;
commissionFeeCostL1 = obj.blockchains.commissionFeeCostL1;
commissionFeeCostL2 = obj.blockchains.commissionFeeCostL2;
serviceUriFeeCostL1 = obj.blockchains.serviceUriFeeCostL1;
serviceUriFeeCostL2 = obj.blockchains.serviceUriFeeCostL2;
}
let redeemRewardCostL1USD = 0;
let redeemRewardCostL2USD = 0;
let claimTicketCostL1USD = 0;
let claimTicketCostL2USD = 0;
let withdrawFeeCostL1USD = 0;
let withdrawFeeCostL2USD = 0;
let stakeFeeCostL1USD = 0;
let stakeFeeCostL2USD = 0;
let commissionFeeCostL1USD = 0;
let commissionFeeCostL2USD = 0;
let serviceUriFeeCostL1USD = 0;
let serviceUriFeeCostL2USD = 0;
if (l1GasFeeInGwei && ethPrice) {
if (redeemRewardCostL1) {
redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
}
if (claimTicketCostL1) {
claimTicketCostL1USD = (claimTicketCostL1 * ethPrice).toFixed(2);
}
if (withdrawFeeCostL1) {
withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
}
if (stakeFeeCostL1) {
stakeFeeCostL1USD = (stakeFeeCostL1 * ethPrice).toFixed(2);
}
if (commissionFeeCostL1) {
commissionFeeCostL1USD = (commissionFeeCostL1 * ethPrice).toFixed(2);
}
if (serviceUriFeeCostL1) {
serviceUriFeeCostL1USD = (serviceUriFeeCostL1 * ethPrice).toFixed(2);
}
}
if (l2GasFeeInGwei && ethPrice) {
if (redeemRewardCostL2) {
redeemRewardCostL2USD = (redeemRewardCostL2 * ethPrice).toFixed(2);
}
if (claimTicketCostL2) {
claimTicketCostL2USD = (claimTicketCostL2 * ethPrice).toFixed(2);
}
if (withdrawFeeCostL2) {
withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
}
if (stakeFeeCostL2) {
stakeFeeCostL2USD = (stakeFeeCostL2 * ethPrice).toFixed(2);
}
if (commissionFeeCostL2) {
commissionFeeCostL2USD = (commissionFeeCostL2 * ethPrice).toFixed(2);
}
if (serviceUriFeeCostL2) {
serviceUriFeeCostL2USD = (serviceUriFeeCostL2 * ethPrice).toFixed(2);
}
}
return (
<div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className='rowAlignRight'>
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} />
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} />
</div>
<div className='rowAlignRight'>
<Stat header={"Staking Fees"} content1={"$" + stakeFeeCostL2USD + " ($" + stakeFeeCostL1USD + " on L1)"} />
<Stat header={"Set Config"} content1={"$" + commissionFeeCostL2USD + " ($" + commissionFeeCostL1USD + " on L1)"} />
</div>
</div>
</div>
)
}
export default ContractPrices;

2
src/OrchAddressViewer.js → src/components/OrchAddressViewer.js
View File

@ -4,7 +4,7 @@ import ReactTooltip from "react-tooltip";
const Address = (obj) => {
return (
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
<a className="selectOrchLight" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
<a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
<img alt="" src="livepeer.png" width="20" height="20" />
<span className="elipsText elipsOnMobile">{obj.address}</span>

0
src/OrchDelegatorViewer.js → src/components/OrchDelegatorViewer.js
View File

0
src/OrchInfoViewer.js → src/components/OrchInfoViewer.js
View File

8
src/eventButton.js → src/components/eventButton.js
View File

@ -1,7 +1,7 @@
import React from "react";
import {
getOrchestratorInfo
} from "./actions/livepeer";
} from "../actions/livepeer";
import { useDispatch } from 'react-redux';
import Block from "./BlockViewer";
@ -26,7 +26,7 @@ const EventButton = (obj) => {
eventTo =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}>
<span>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
@ -41,7 +41,7 @@ const EventButton = (obj) => {
eventFrom =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}>
<span>From&nbsp;&nbsp;:</span>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
@ -56,7 +56,7 @@ const EventButton = (obj) => {
eventCaller =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}>
<span>Caller&nbsp;:</span>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
<a className="selectOrch" style={{ cursor: 'alias', marginLeft: '0.5em' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >

79
src/eventViewer.js → src/components/eventViewer.js
View File

@ -1,6 +1,7 @@
import React, { useState, useRef } from "react";
import EventButton from "./eventButton";
import ScrollContainer from 'react-indiana-drag-scroll';
import Filter from './filterComponent';
import ReactPaginate from 'react-paginate';
/// A scrollable and filterable list of EventButtons
@ -14,7 +15,6 @@ const unbondColour = "rgba(122, 23, 51, 0.3)";
const ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
const greyColour = "rgba(122, 128, 127, 0.3)";
const defaultMaxShown = 100;
const defaultIncrementMaxShown = 100;
const EventViewer = (obj) => {
@ -63,17 +63,6 @@ const EventViewer = (obj) => {
}
}
let searchTermText;
if (obj.searchTerm !== "") {
if (obj.searchTerm.length > 15) {
searchTermText = <h3>Only showing addresses containing {obj.searchTerm.substring(0, 15)}...</h3>
} else {
searchTermText = <h3>Only showing addresses containing {obj.searchTerm}</h3>
}
} else {
searchTermText = <h3>Filter by Orchestrator address</h3>
}
let eventList = [];
let thisEvent = {};
let eventIdx = obj.events.length - 1;
@ -219,7 +208,7 @@ const EventViewer = (obj) => {
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}>
<button className="row nonHomeButton" style={{ backgroundColor: greyColour }} onClick={() => {
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);;
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
}}>
<h3>🔄 Show More</h3>
</button>
@ -230,68 +219,12 @@ const EventViewer = (obj) => {
let filterBit;
if (obj.showFilter) {
filterBit =
<div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
<div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
<div className="row">
<span>Showing {hidden + unfiltered} out of {limitShown} results</span>
</div>
<div className="flexContainer" style={{margin: 0, width: '100%'}}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
{searchTermText}
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setSearchTerm("");
}}>
<h3>Clear</h3>
</button>
</div>
<input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.searchTerm}
onChange={(evt) => obj.setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address'
type="text"
/>
</div>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setAmountFilter(0);
}}>
<h3>0</h3>
</button>
</div>
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.amountFilter}
onChange={(evt) => obj.setAmountFilter(evt.target.value)}
placeholder='Filter by minimum value'
type="number"
/>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 100);
}}>
<h3>+100</h3>
</button>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 1000);
}}>
<h3>+1000</h3>
</button>
</div>
</div>
</div>
</div>
<Filter amountFilter={obj.amountFilter} setAmountFilter={obj.setAmountFilter}
searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} />
</div>
}
@ -311,7 +244,7 @@ const EventViewer = (obj) => {
</div>
</ScrollContainer>
<div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour, marginTop: '0.7em' }} onClick={() => {
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour, marginTop: '0.7em' }} onClick={() => {
setFilterActivated(!filterActivated);
}}>
<h3>Activated</h3>

79
src/components/filterComponent.js Normal file
View File

@ -0,0 +1,79 @@
import React from "react";
const greyColour = "rgba(122, 128, 127, 0.3)";
const Filter = (obj) => {
let searchTermText;
if (obj.searchTerm !== "") {
if (obj.searchTerm.length > 15) {
searchTermText = <h3>Only showing addresses containing {obj.searchTerm.substring(0, 15)}...</h3>
} else {
searchTermText = <h3>Only showing addresses containing {obj.searchTerm}</h3>
}
} else {
searchTermText = <h3>Filter by Orchestrator address</h3>
}
return (
<div className="flexContainer" style={{ margin: 0, width: '100%' }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
{searchTermText}
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setSearchTerm("");
}}>
<h3>Clear</h3>
</button>
</div>
<input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.searchTerm}
onChange={(evt) => obj.setSearchTerm(evt.target.value)}
placeholder='Filter by Orchestrator address'
type="text"
/>
</div>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
</div>
<div className="row" style={{ margin: 0, padding: 0 }}>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
obj.setAmountFilter(0);
}}>
<h3>0</h3>
</button>
</div>
<input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
value={obj.amountFilter}
onChange={(evt) => obj.setAmountFilter(evt.target.value)}
placeholder='Filter by minimum value'
type="number"
/>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 100);
}}>
<h3>+100</h3>
</button>
</div>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
<button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
const curVal = parseFloat(obj.amountFilter);
obj.setAmountFilter(curVal + 1000);
}}>
<h3>+1000</h3>
</button>
</div>
</div>
</div>
</div>
)
}
export default Filter;

4
src/orchestratorViewer.js → src/components/orchestratorViewer.js
View File

@ -1,8 +1,4 @@
import React from "react";
import ScrollContainer from "react-indiana-drag-scroll";
import Stat from "./statViewer";
import ReactTooltip from "react-tooltip";
import Address from "./OrchAddressViewer";
import OrchDelegatorViewer from "./OrchDelegatorViewer";
import OrchInfoViewer from "./OrchInfoViewer";

0
src/statViewer.js → src/components/statViewer.js
View File

220
src/livepeer.js
View File

@ -1,220 +0,0 @@
import React, { useState, useEffect } from 'react'
import './style.css';
import { Navigate, useSearchParams } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux'
import { getOrchestratorInfo, clearOrchestrator } from "./actions/livepeer";
import EventViewer from "./eventViewer";
import Orchestrator from "./orchestratorViewer";
import Stat from "./statViewer";
// Shows the EventViewer and other Livepeer related info
const defaultMaxShown = 100;
const Livepeer = (obj) => {
const [amountFilter, setAmountFilter] = useState("0");
const [maxAmount, setMaxAmount] = useState(defaultMaxShown);
const [prefill, setPrefill] = useSearchParams();
const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch();
const livepeer = useSelector((state) => state.livepeerstate);
const [redirectToHome, setRedirectToHome] = useState(false);
const [showFilter, setShowFilter] = useState(false);
const [showSidebar, setShowSidebar] = useState(true);
console.log("Rendering Livepeer");
useEffect(() => {
if (prefill.get('orchAddr') && prefill.get('orchAddr') !== "") {
dispatch(getOrchestratorInfo(prefill.get('orchAddr')));
setSearchTerm(prefill.get('orchAddr'));
}
}, [prefill]);
if (redirectToHome) {
return <Navigate push to="/" />;
}
let ethPrice = 0;
if (livepeer.quotes) {
if (livepeer.quotes.ETH) {
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
}
}
let l1GasFeeInGwei = 0;
let l2GasFeeInGwei = 0;
let redeemRewardCostL1 = 0;
let redeemRewardCostL2 = 0;
let claimTicketCostL1 = 0;
let claimTicketCostL2 = 0;
let withdrawFeeCostL1 = 0;
let withdrawFeeCostL2 = 0;
let stakeFeeCostL1 = 0;
let stakeFeeCostL2 = 0;
let commissionFeeCostL1 = 0;
let commissionFeeCostL2 = 0;
let serviceUriFeeCostL1 = 0;
let serviceUriFeeCostL2 = 0;
if (livepeer.blockchains) {
l1GasFeeInGwei = livepeer.blockchains.l1GasFeeInGwei;
l2GasFeeInGwei = livepeer.blockchains.l2GasFeeInGwei;
redeemRewardCostL1 = livepeer.blockchains.redeemRewardCostL1;
redeemRewardCostL2 = livepeer.blockchains.redeemRewardCostL2;
claimTicketCostL1 = livepeer.blockchains.claimTicketCostL1;
claimTicketCostL2 = livepeer.blockchains.claimTicketCostL2;
withdrawFeeCostL1 = livepeer.blockchains.withdrawFeeCostL1;
withdrawFeeCostL2 = livepeer.blockchains.withdrawFeeCostL2;
stakeFeeCostL1 = livepeer.blockchains.stakeFeeCostL1;
stakeFeeCostL2 = livepeer.blockchains.stakeFeeCostL2;
commissionFeeCostL1 = livepeer.blockchains.commissionFeeCostL1;
commissionFeeCostL2 = livepeer.blockchains.commissionFeeCostL2;
serviceUriFeeCostL1 = livepeer.blockchains.serviceUriFeeCostL1;
serviceUriFeeCostL2 = livepeer.blockchains.serviceUriFeeCostL2;
}
let redeemRewardCostL1USD = 0;
let redeemRewardCostL2USD = 0;
let claimTicketCostL1USD = 0;
let claimTicketCostL2USD = 0;
let withdrawFeeCostL1USD = 0;
let withdrawFeeCostL2USD = 0;
let stakeFeeCostL1USD = 0;
let stakeFeeCostL2USD = 0;
let commissionFeeCostL1USD = 0;
let commissionFeeCostL2USD = 0;
let serviceUriFeeCostL1USD = 0;
let serviceUriFeeCostL2USD = 0;
if (l1GasFeeInGwei && ethPrice) {
if (redeemRewardCostL1) {
redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
}
if (claimTicketCostL1) {
claimTicketCostL1USD = (claimTicketCostL1 * ethPrice).toFixed(2);
}
if (withdrawFeeCostL1) {
withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
}
if (stakeFeeCostL1) {
stakeFeeCostL1USD = (stakeFeeCostL1 * ethPrice).toFixed(2);
}
if (commissionFeeCostL1) {
commissionFeeCostL1USD = (commissionFeeCostL1 * ethPrice).toFixed(2);
}
if (serviceUriFeeCostL1) {
serviceUriFeeCostL1USD = (serviceUriFeeCostL1 * ethPrice).toFixed(2);
}
}
if (l2GasFeeInGwei && ethPrice) {
if (redeemRewardCostL2) {
redeemRewardCostL2USD = (redeemRewardCostL2 * ethPrice).toFixed(2);
}
if (claimTicketCostL2) {
claimTicketCostL2USD = (claimTicketCostL2 * ethPrice).toFixed(2);
}
if (withdrawFeeCostL2) {
withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
}
if (stakeFeeCostL2) {
stakeFeeCostL2USD = (stakeFeeCostL2 * ethPrice).toFixed(2);
}
if (commissionFeeCostL2) {
commissionFeeCostL2USD = (commissionFeeCostL2 * ethPrice).toFixed(2);
}
if (serviceUriFeeCostL2) {
serviceUriFeeCostL2USD = (serviceUriFeeCostL2 * ethPrice).toFixed(2);
}
}
let eventsList = [];
if (livepeer.events) {
eventsList = livepeer.events;
}
let ticketList = [];
let ticketBit;
if (livepeer.tickets) {
ticketList = livepeer.tickets;
}
let thisOrchObj;
let headerString;
if (livepeer.selectedOrchestrator) {
thisOrchObj = livepeer.selectedOrchestrator;
headerString = "Inspecting " + thisOrchObj.id;
} else {
headerString = "Livepeer Orchestrator Explorer";
}
let sidebar;
if (showSidebar) {
sidebar = <div id='sideContent'>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%', marginTop: '1em' }}>
<div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}>
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div>
<div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className='rowAlignRight'>
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} />
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} />
</div>
<div className='rowAlignRight'>
<Stat header={"Staking Fees"} content1={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} />
<Stat header={"Set Config"} content1={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} />
</div>
</div>
</div>
</div>
</div >
}
return (
<div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}>
<div id='header'>
<div className='rowAlignLeft'>
<button className="homeButton" onClick={() => {
setRedirectToHome(true);
}}>
<h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
</button>
<h4 className="rowAlignLeft withWrap elipsOnMobile">{headerString}</h4>
</div>
<div className='rowAlignRight'>
<button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
dispatch(clearOrchestrator());
setSearchTerm("");
setAmountFilter(0);
setMaxAmount(defaultMaxShown);
}}>
<h4>✖️ Clear</h4>
</button>
<p>Sidebar</p>
<div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>
<div className={`dialog-button ${showSidebar ? "" : "disabled"}`}>
{showSidebar ? "Show" : "Hide"}
</div>
</div>
<p>Filter</p>
<div className="toggle-container" onClick={() => setShowFilter(!showFilter)}>
<div className={`dialog-button ${showFilter ? "" : "disabled"}`}>
{showFilter ? "Show" : "Hide"}
</div>
</div>
</div>
</div>
<div id='bodyContent'>
{sidebar}
<div className="mainContent">
<EventViewer events={eventsList} searchTerm={searchTerm} setSearchTerm={setSearchTerm}
forceVertical={true} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter}
maxAmount={maxAmount} setMaxAmount={setMaxAmount} tickets={ticketList} />
</div>
</div>
</div >
);
}
export default Livepeer;

7
src/grafana.js → src/pages/grafana.js
View File

@ -1,21 +1,20 @@
import React, { useState } from 'react'
import './style.css';
import '../style.css';
import {
Navigate
} from "react-router-dom";
import { useSelector } from 'react-redux'
import Orchestrator from "./orchestratorViewer";
import Orchestrator from "../components/orchestratorViewer";
// Displays orchestrator info and embedded grafana panels
const Grafana = (obj) => {
const livepeer = useSelector((state) => state.livepeerstate);
const [redirectToHome, setRedirectToHome] = useState(false);
if (redirectToHome) {
return <Navigate push to="/" />;
}
// Generate component for displaying LPT and ETH price and price change
let lptPrice = 0;
let ethPrice = 0;
let lptPriceChange24h = 0;

13
src/home.js → src/pages/home.js
View File

@ -1,31 +1,26 @@
import React, { useState } from 'react';
import './style.css';
import '../style.css';
import {
Navigate
} from "react-router-dom";
import { useSelector } from 'react-redux';
import RetroHitCounter from 'react-retro-hit-counter';
// Index of all subpages on this website
// Index of all sub-pages on this website
const Home = (obj) => {
const userstate = useSelector((state) => state.userstate);
const sessionstate = useSelector((state) => state.session);
const [redirectToGrafana, setRedirectToGrafana] = useState(false);
const [redirectToLPT, setRedirectToLPT] = useState(false);
if (redirectToGrafana) {
return <Navigate push to="/orchestrator" />;
}
if (redirectToLPT) {
return <Navigate push to="/livepeer" />;
}
// Get amount of unique IP's which have visited this website
var totalVisitorCount = 0;
var activeVisitorCount = 0;
if (userstate.visitorStats) {
totalVisitorCount = userstate.visitorStats.totalVisitorCount;
activeVisitorCount = userstate.visitorStats.activeVisitorCount
}
return (
@ -80,8 +75,6 @@ const Home = (obj) => {
glowStrength={0.4}
/>
</div>
</div>
<div className="alwaysOnBottomRight" style={{ margin: 0, padding: 0 }}>
<h6 className="lightText" style={{ margin: 0, padding: 0 }}>
nframe.nl
</h6>

114
src/pages/livepeer.js Normal file
View File

@ -0,0 +1,114 @@
import React, { useState, useEffect } from 'react'
import '../style.css';
import { Navigate, useSearchParams } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux'
import { getOrchestratorInfo, clearOrchestrator } from "../actions/livepeer";
import EventViewer from "../components/eventViewer";
import Orchestrator from "../components/orchestratorViewer";
import ContractPrices from '../components/ContractPrices';
// Shows the EventViewer and other Livepeer related info
const defaultMaxShown = 100;
const Livepeer = (obj) => {
const [amountFilter, setAmountFilter] = useState("0");
const [maxAmount, setMaxAmount] = useState(defaultMaxShown);
const [prefill, setPrefill] = useSearchParams();
const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch();
const livepeer = useSelector((state) => state.livepeerstate);
const [redirectToHome, setRedirectToHome] = useState(false);
const [showFilter, setShowFilter] = useState(false);
const [showSidebar, setShowSidebar] = useState(true);
console.log("Rendering Livepeer");
useEffect(() => {
if (prefill.get('orchAddr') && prefill.get('orchAddr') !== "") {
dispatch(getOrchestratorInfo(prefill.get('orchAddr')));
setSearchTerm(prefill.get('orchAddr'));
}
}, [prefill]);
if (redirectToHome) {
return <Navigate push to="/" />;
}
let eventsList = [];
if (livepeer.events) {
eventsList = livepeer.events;
}
let ticketList = [];
if (livepeer.tickets) {
ticketList = livepeer.tickets;
}
let thisOrchObj;
let headerString;
if (livepeer.selectedOrchestrator) {
thisOrchObj = livepeer.selectedOrchestrator;
headerString = "Inspecting " + thisOrchObj.id;
} else {
headerString = "Livepeer Orchestrator Explorer";
}
let sidebar;
if (showSidebar) {
sidebar = <div id='sideContent'>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%', marginTop: '1em' }}>
<div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}>
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div>
<ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
</div>
</div >
}
return (
<div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}>
<div id='header'>
<div className='rowAlignLeft'>
<button className="homeButton" onClick={() => {
setRedirectToHome(true);
}}>
<h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
</button>
<h4 className="rowAlignLeft withWrap elipsOnMobile">{headerString}</h4>
</div>
<div className='rowAlignRight'>
<button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
dispatch(clearOrchestrator());
setSearchTerm("");
setAmountFilter(0);
setMaxAmount(defaultMaxShown);
}}>
<h4>✖️ Clear</h4>
</button>
<p>Sidebar</p>
<div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>
<div className={`dialog-button ${showSidebar ? "" : "disabled"}`}>
{showSidebar ? "Show" : "Hide"}
</div>
</div>
<p>Filter</p>
<div className="toggle-container" onClick={() => setShowFilter(!showFilter)}>
<div className={`dialog-button ${showFilter ? "" : "disabled"}`}>
{showFilter ? "Show" : "Hide"}
</div>
</div>
</div>
</div>
<div id='bodyContent'>
{sidebar}
<div className="mainContent">
<EventViewer events={eventsList} searchTerm={searchTerm} setSearchTerm={setSearchTerm}
forceVertical={true} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter}
maxAmount={maxAmount} setMaxAmount={setMaxAmount} tickets={ticketList} />
</div>
</div>
</div >
);
}
export default Livepeer;

6
src/loadingScreen.js → src/pages/loadingScreen.js
View File

@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
import { useDispatch, batch } from 'react-redux'
import {
getVisitorStats
} from "./actions/user";
} from "../actions/user";
import {
getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getTickets
} from "./actions/livepeer";
import { login } from "./actions/session";
} from "../actions/livepeer";
import { login } from "../actions/session";
// Shows a loading screen on first load and gets fresh data every refreshInterval milliseconds