mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 02:35:09 +02:00
Modify home page
This commit is contained in:
parent
de10fa8a8f
commit
a8c8ec09e8
BIN
public/ad-astra-video.png
Normal file
BIN
public/ad-astra-video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
public/xodeapp.png
Normal file
BIN
public/xodeapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@ -1,26 +1,18 @@
|
||||
import React, { useState } from 'react';
|
||||
import '../style.css';
|
||||
import {
|
||||
Navigate
|
||||
} from "react-router-dom";
|
||||
import { useSelector } from 'react-redux';
|
||||
import RetroHitCounter from 'react-retro-hit-counter';
|
||||
import ContractPrices from '../components/ContractPrices';
|
||||
import React, { useState } from "react";
|
||||
import "../style.css";
|
||||
import { Navigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import RetroHitCounter from "react-retro-hit-counter";
|
||||
import ContractPrices from "../components/ContractPrices";
|
||||
|
||||
// Index of all sub-pages on this website
|
||||
|
||||
const Home = (obj) => {
|
||||
const userstate = useSelector((state) => state.userstate);
|
||||
const livepeer = useSelector((state) => state.livepeerstate);
|
||||
const [redirectToGrafana, setRedirectToGrafana] = useState(false);
|
||||
const [redirectToLPT, setRedirectToLPT] = useState(false);
|
||||
const [redirectToStats, setRedirectToStats] = useState(false);
|
||||
const [redirectToGraphs, setRedirectToGraphs] = useState(false);
|
||||
const [thisChad, setChad] = useState("");
|
||||
|
||||
if (redirectToGrafana) {
|
||||
return <Navigate push to="/stake" />;
|
||||
}
|
||||
|
||||
if (redirectToLPT) {
|
||||
return <Navigate push to="/livepeer" />;
|
||||
}
|
||||
@ -28,16 +20,13 @@ const Home = (obj) => {
|
||||
return <Navigate push to="/stats" />;
|
||||
}
|
||||
|
||||
if (redirectToGraphs) {
|
||||
return <Navigate push to="/graphs" />;
|
||||
}
|
||||
// Get amount of unique IP's which have visited this website
|
||||
var totalVisitorCount = 0;
|
||||
if (userstate.visitorStats) {
|
||||
totalVisitorCount = userstate.visitorStats.totalVisitorCount;
|
||||
}
|
||||
|
||||
if (thisChad == ""){
|
||||
if (thisChad == "") {
|
||||
const randomChad = performance.now();
|
||||
const chadSource = "https://stronk.rocks/avatar.png?" + randomChad;
|
||||
setChad(chadSource);
|
||||
@ -47,103 +36,393 @@ const Home = (obj) => {
|
||||
<div className="stroke">
|
||||
<div className="verticalDivider" />
|
||||
<div className="row">
|
||||
<img alt="" src="android-chrome-512x512.png" width="100em" style={{ zIndex: 10 }} />
|
||||
<img
|
||||
alt=""
|
||||
src="android-chrome-512x512.png"
|
||||
width="100em"
|
||||
style={{ zIndex: 10 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="verticalDivider" />
|
||||
<div className="stroke roundedOpaque" style={{ maxWidth: '400px' }}>
|
||||
<div className="verticalDivider" />
|
||||
<div className="row">
|
||||
<h3>Home</h3>
|
||||
|
||||
<div
|
||||
className="stroke roundedOpaque"
|
||||
style={{ maxWidth: "800px", marginBottom: "1em" }}
|
||||
>
|
||||
<div className="row" style={{ marginTop: "1em" }}>
|
||||
<p>
|
||||
On this page you will find an overview of everything related to{" "}
|
||||
<strong>captain-stronk.eth</strong>
|
||||
</p>
|
||||
</div>
|
||||
<button className="waveButton" onClick={() => {
|
||||
setRedirectToGrafana(true);
|
||||
}}>
|
||||
|
||||
<div className="verticalDivider" />
|
||||
|
||||
<div className="row">
|
||||
<h3>Stronk Orchestrator</h3>
|
||||
</div>
|
||||
<a
|
||||
href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src={thisChad}
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Health and Statistics
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://forum.livepeer.org/t/transcoder-campaign-captain-stronk"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="livepeer.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
News and Updates
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div
|
||||
className="row"
|
||||
style={{ width: "unset", marginTop: "1em", marginBottom: "1em" }}
|
||||
>
|
||||
<a
|
||||
className="selectOrch"
|
||||
style={{ padding: "0.2em", cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={
|
||||
"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"
|
||||
}
|
||||
>
|
||||
<img alt="" src="livepeer.png" width="20em" height="20em" />
|
||||
<span>Stake with captain-stronk.eth</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<h3>Stronk Utilities</h3>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="waveButton"
|
||||
onClick={() => {
|
||||
setRedirectToLPT(true);
|
||||
}}
|
||||
>
|
||||
<div className="row">
|
||||
<img alt="" src={thisChad} width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Orchestrator</p>
|
||||
<img
|
||||
alt=""
|
||||
src="arb.svg"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Smart contract explorer
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button className="waveButton" onClick={() => {
|
||||
setRedirectToLPT(true);
|
||||
}}>
|
||||
<button
|
||||
className="waveButton"
|
||||
onClick={() => {
|
||||
setRedirectToStats(true);
|
||||
}}
|
||||
>
|
||||
<div className="row">
|
||||
<img alt="" src="arb.svg" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Contract Events</p>
|
||||
<img
|
||||
alt=""
|
||||
src="stats.jpg"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Monthly smart contract summary
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button className="waveButton" onClick={() => {
|
||||
setRedirectToStats(true);
|
||||
}}>
|
||||
<div className="row">
|
||||
<img alt="" src="stats.jpg" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Statistics</p>
|
||||
</div>
|
||||
</button>
|
||||
{/* <div className="row">
|
||||
<button className="waveButton" onClick={() => {
|
||||
setRedirectToGraphs(true);
|
||||
}}>
|
||||
<p>📉 Graphs 📊</p>
|
||||
</button>
|
||||
</div> */}
|
||||
<div className="verticalDivider" />
|
||||
<div className="row">
|
||||
<p>External Links:</p>
|
||||
<a
|
||||
href="https://dune.com/stronk/livepeer-arbitrum"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="dune.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Smart contract graphs
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/stronk-dev/MistLoadLivepeer"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="github.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Orchestrator load testing
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a
|
||||
href="https://hedgedoc.ddvtech.com/wpwHEXMFTueUM7jqhikTvw?view"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="setup.svg"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Orchestrator Linux setup guide
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div
|
||||
className="row"
|
||||
style={{ width: "unset", marginTop: "1em", marginBottom: "1em" }}
|
||||
>
|
||||
<a
|
||||
className="selectOrch"
|
||||
style={{ padding: "0.2em", cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={
|
||||
"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"
|
||||
}
|
||||
>
|
||||
<img alt="" src="livepeer.png" width="20em" height="20em" />
|
||||
<span>Stake with captain-stronk.eth</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://forum.livepeer.org/t/transcoder-campaign-captain-stronk">
|
||||
<button className="waveButton">
|
||||
<div className="row">
|
||||
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Transcoder Campaign</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://github.com/stronk-dev/LivepeerEvents">
|
||||
<button className="waveButton">
|
||||
<div className="row">
|
||||
<img alt="" src="github.png" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Source Code</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://grafana.stronk.tech/d/b8FvMmmVk/orchestrator-tracker">
|
||||
<button className="waveButton">
|
||||
<div className="row">
|
||||
<img alt="" src="grafana.png" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Orchestrator Tracker</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://dune.com/stronk/livepeer-arbitrum">
|
||||
<button className="waveButton">
|
||||
<div className="row">
|
||||
<img alt="" src="dune.png" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Better Stats</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://hedgedoc.ddvtech.com/wpwHEXMFTueUM7jqhikTvw?view">
|
||||
<button className="waveButton">
|
||||
<div className="row">
|
||||
<img alt="" src="setup.svg" width="20em" height="20em" style={{ margin: 0 }} />
|
||||
<p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Orchestrator Setup</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<div className="verticalDivider" />
|
||||
|
||||
<div className="row">
|
||||
<ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
|
||||
<h3>Stronk Tips</h3>
|
||||
</div>
|
||||
{/* <div className="verticalDivider" />
|
||||
<div className="row">
|
||||
<h3>Status</h3>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p>There was an issue with Events getting duplicated. The website might become unavailable from time to time while the issue is being fixed.</p>
|
||||
</div> */}
|
||||
<div className="verticalDivider" />
|
||||
</div>
|
||||
<div className="alwaysOnBottom showNeverOnMobile">
|
||||
|
||||
<a
|
||||
href="https://www.livepeer.tools/"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="xodeapp.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Orchestrator payouts & earnings
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://livepeer-test-broadcaster.ad-astra.video/"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="ad-astra-video.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Orchestrator test streams
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div
|
||||
className="row"
|
||||
style={{ width: "unset", marginTop: "1em", marginBottom: "1em" }}
|
||||
>
|
||||
<a
|
||||
className="selectOrch"
|
||||
style={{ padding: "0.2em", cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={
|
||||
"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"
|
||||
}
|
||||
>
|
||||
<img alt="" src="livepeer.png" width="20em" height="20em" />
|
||||
<span>Stake with captain-stronk.et9h</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<h3>Stronk Broadcaster</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://video.stronk.rocks/"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="android-chrome-512x512.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
StreamCrafter demo
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://grafana.stronk.tech/d/lp-global-orch-instances/livepeer-global-overview"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="grafana.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Global Orchestrator tracker
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://grafana.stronk.tech/d/lp-orchestrator/livepeer-orchestrator-overview"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="grafana.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Regional health tracker
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://grafana.stronk.tech/d/lp-regional-orchestrator/livepeer-regional-overview"
|
||||
style={{ cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="waveButton" style={{ cursor: "alias" }}>
|
||||
<div className="row">
|
||||
<img
|
||||
alt=""
|
||||
src="grafana.png"
|
||||
width="20em"
|
||||
height="20em"
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<p style={{ padding: "0.3em", flex: 1, flexGrow: 3 }}>
|
||||
Orchestrator health tracker
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div
|
||||
className="row"
|
||||
style={{ width: "unset", marginTop: "1em", marginBottom: "1em" }}
|
||||
>
|
||||
<a
|
||||
className="selectOrch"
|
||||
style={{ padding: "0.2em", cursor: "alias" }}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={
|
||||
"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"
|
||||
}
|
||||
>
|
||||
<img alt="" src="livepeer.png" width="20em" height="20em" />
|
||||
<span>Stake with captain-stronk.eth</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<RetroHitCounter
|
||||
hits={totalVisitorCount}
|
||||
@ -162,12 +441,10 @@ const Home = (obj) => {
|
||||
glowStrength={0.4}
|
||||
/>
|
||||
</div>
|
||||
<h6 className="lightText">
|
||||
stronk.rocks
|
||||
</h6>
|
||||
<div className="verticalDivider" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
@ -292,6 +292,7 @@ svg {
|
||||
|
||||
.verticalDivider {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
@ -438,7 +439,9 @@ svg {
|
||||
}
|
||||
|
||||
.waveButton {
|
||||
min-width: 200px;
|
||||
min-width: 400px;
|
||||
max-width: 400px;
|
||||
width: 400px;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user