diff --git a/src/App.js b/src/App.js index b504857..3dec16b 100644 --- a/src/App.js +++ b/src/App.js @@ -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, diff --git a/src/BlockViewer.js b/src/components/BlockViewer.js similarity index 83% rename from src/BlockViewer.js rename to src/components/BlockViewer.js index d922d22..f2a3b8e 100644 --- a/src/BlockViewer.js +++ b/src/components/BlockViewer.js @@ -7,11 +7,11 @@ const Block = (obj) => { const [thisDate, thisTime] = dateObj.toISOString().split('T'); return (
- + - + 🔗{obj.block}

📅{thisDate} - {thisTime.split('.')[0]}

diff --git a/src/components/ContractPrices.js b/src/components/ContractPrices.js new file mode 100644 index 0000000..8623292 --- /dev/null +++ b/src/components/ContractPrices.js @@ -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 ( +
+
+

Smart contract prices

+
+
+
+ + +
+
+ + +
+
+
+ ) +} + +export default ContractPrices; \ No newline at end of file diff --git a/src/OrchAddressViewer.js b/src/components/OrchAddressViewer.js similarity index 78% rename from src/OrchAddressViewer.js rename to src/components/OrchAddressViewer.js index 0fa6d03..c683c4c 100644 --- a/src/OrchAddressViewer.js +++ b/src/components/OrchAddressViewer.js @@ -4,7 +4,7 @@ import ReactTooltip from "react-tooltip"; const Address = (obj) => { return (
- +
{obj.address} diff --git a/src/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js similarity index 100% rename from src/OrchDelegatorViewer.js rename to src/components/OrchDelegatorViewer.js diff --git a/src/OrchInfoViewer.js b/src/components/OrchInfoViewer.js similarity index 100% rename from src/OrchInfoViewer.js rename to src/components/OrchInfoViewer.js diff --git a/src/eventButton.js b/src/components/eventButton.js similarity index 90% rename from src/eventButton.js rename to src/components/eventButton.js index bf5d4f7..4066e51 100644 --- a/src/eventButton.js +++ b/src/components/eventButton.js @@ -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 =
To        : - + @@ -230,68 +219,12 @@ const EventViewer = (obj) => { let filterBit; if (obj.showFilter) { filterBit = -
+
Showing {hidden + unfiltered} out of {limitShown} results
-
-
-
- {searchTermText} -
-
-
- -
- obj.setSearchTerm(evt.target.value)} - placeholder='Filter by Orchestrator address' - type="text" - /> -
-
-
-
-

{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}

-
-
-
- -
- obj.setAmountFilter(evt.target.value)} - placeholder='Filter by minimum value' - type="number" - /> -
- -
-
- -
-
-
-
+
} @@ -311,7 +244,7 @@ const EventViewer = (obj) => {
- +
+ obj.setSearchTerm(evt.target.value)} + placeholder='Filter by Orchestrator address' + type="text" + /> +
+
+
+
+

{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}

+
+
+
+ +
+ obj.setAmountFilter(evt.target.value)} + placeholder='Filter by minimum value' + type="number" + /> +
+ +
+
+ +
+
+
+
+ ) +} + +export default Filter; \ No newline at end of file diff --git a/src/orchestratorViewer.js b/src/components/orchestratorViewer.js similarity index 94% rename from src/orchestratorViewer.js rename to src/components/orchestratorViewer.js index 5db7107..bdcb571 100644 --- a/src/orchestratorViewer.js +++ b/src/components/orchestratorViewer.js @@ -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"; diff --git a/src/statViewer.js b/src/components/statViewer.js similarity index 100% rename from src/statViewer.js rename to src/components/statViewer.js diff --git a/src/livepeer.js b/src/livepeer.js deleted file mode 100644 index f4bef50..0000000 --- a/src/livepeer.js +++ /dev/null @@ -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 ; - } - - 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 =
-
-
- -
-
-
-

Smart contract prices

-
-
-
- - -
-
- - -
-
-
-
-
- } - - - return ( -
- -
- {sidebar} -
- -
-
-
- ); -} - -export default Livepeer; \ No newline at end of file diff --git a/src/grafana.js b/src/pages/grafana.js similarity index 96% rename from src/grafana.js rename to src/pages/grafana.js index d1a19c9..caa921b 100644 --- a/src/grafana.js +++ b/src/pages/grafana.js @@ -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 ; } - + // Generate component for displaying LPT and ETH price and price change let lptPrice = 0; let ethPrice = 0; let lptPriceChange24h = 0; diff --git a/src/home.js b/src/pages/home.js similarity index 89% rename from src/home.js rename to src/pages/home.js index 341788a..00842a7 100644 --- a/src/home.js +++ b/src/pages/home.js @@ -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 ; } if (redirectToLPT) { return ; } - + // 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} />
- -
nframe.nl
diff --git a/src/pages/livepeer.js b/src/pages/livepeer.js new file mode 100644 index 0000000..2bc0249 --- /dev/null +++ b/src/pages/livepeer.js @@ -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 ; + } + + 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 =
+
+
+ +
+ +
+
+ } + + + return ( +
+ +
+ {sidebar} +
+ +
+
+
+ ); +} + +export default Livepeer; \ No newline at end of file diff --git a/src/loadingScreen.js b/src/pages/loadingScreen.js similarity index 94% rename from src/loadingScreen.js rename to src/pages/loadingScreen.js index be5bdc4..7efeefc 100644 --- a/src/loadingScreen.js +++ b/src/pages/loadingScreen.js @@ -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