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

New colours

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-13 00:27:55 +01:00
parent e433d8fd9b
commit 488b8c47ab
9 changed files with 96 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,7 +19,6 @@
"react-retro-hit-counter": "^1.0.1", "react-retro-hit-counter": "^1.0.1",
"react-router-dom": "^6.0.2", "react-router-dom": "^6.0.2",
"react-scripts": "3.2.0", "react-scripts": "3.2.0",
"react-tooltip": "^4.2.21",
"redux": "^4.1.2", "redux": "^4.1.2",
"redux-thunk": "^2.4.1", "redux-thunk": "^2.4.1",
"styled-components": "^5.3.3" "styled-components": "^5.3.3"

42
src/actions/livepeer.js
View File

@ -1,16 +1,16 @@
import * as apiUtil from "../util/livepeer"; import * as apiUtil from "../util/livepeer";
import { receiveErrors } from "./error"; import { receiveErrors } from "./error";
const activationColour = "rgba(23, 60, 122, 0.3)"; const claimColour = "rgba(25, 158, 29, 0.3)";
const rewardColour = "rgba(20, 99, 29, 0.3)"; const stakeColour = "rgba(25, 158, 147, 0.3)";
const updateColour = "rgba(122, 63, 23, 0.3)"; const ticketRedeemColour = "rgba(25, 98, 158, 0.3)";
const withdrawStakeColour = "rgba(115, 110, 22, 0.3)"; const rewardColour = "rgba(25, 27, 158, 0.3)";
const stakeColour = "rgba(56, 23, 122, 0.3)"; const unbondColour = "rgba(105, 25, 158, 0.3)";
const unbondColour = "rgba(122, 23, 51, 0.3)"; const updateColour = "rgba(158, 25, 52, 0.3)";
const claimColour = "rgba(77, 91, 42, 0.3)"; const withdrawStakeColour = "rgba(158, 98, 25, 0.3)";
const activationColour = "rgba(154, 158, 25, 0.3)";
const ticketTransferColour = "rgba(88, 91, 42, 0.3)"; const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
const ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
const thresholdStaking = 0.001; const thresholdStaking = 0.001;
const thresholdFees = 0.00009; const thresholdFees = 0.00009;
@ -117,16 +117,16 @@ export const getEvents = () => async dispatch => {
eventFrom = ""; eventFrom = "";
eventTo = ""; eventTo = "";
if (eventContainsBond) { if (eventContainsBond) {
eventDescription = "activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen; eventDescription = "🚀activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen;
} else { } else {
eventDescription = "reactivated and will become active in round " + tmpWhen; eventDescription = "🚀reactivated and will become active in round " + tmpWhen;
} }
} }
// Lone Unbond => Unbond Event // Lone Unbond => Unbond Event
else if (eventContainsUnbond) { else if (eventContainsUnbond) {
eventType = "Unbond"; eventType = "Unbond";
eventColour = unbondColour; eventColour = unbondColour;
eventDescription = "unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen; eventDescription = "❌unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen;
} }
// Lone Bond => Stake Event // Lone Bond => Stake Event
@ -138,18 +138,18 @@ export const getEvents = () => async dispatch => {
else if (eventContainsRebond) { else if (eventContainsRebond) {
eventType = "Stake"; eventType = "Stake";
eventColour = stakeColour; eventColour = stakeColour;
eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT"; eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT";
} }
// Fill description of Stake Event if it wasn't set yet // Fill description of Stake Event if it wasn't set yet
if (eventType === "Stake" && eventDescription === "") { if (eventType === "Stake" && eventDescription === "") {
if (eventFrom === "0x0000000000000000000000000000000000000000") { if (eventFrom === "0x0000000000000000000000000000000000000000") {
eventDescription = "staked " + tmpAmount.toFixed(2) + " LPT"; eventDescription = "⌛staked " + tmpAmount.toFixed(2) + " LPT";
} else if (eventFrom === eventTo) { } else if (eventFrom === eventTo) {
eventFrom = ""; eventFrom = "";
eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT"; eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT";
} else { } else {
eventDescription = "moved a " + tmpAmount.toFixed(2) + " LPT stake"; eventDescription = "⌛moved a " + tmpAmount.toFixed(2) + " LPT stake";
} }
} }
// If we have an eventType at this point, we have a completed Event from the previous transaction // If we have an eventType at this point, we have a completed Event from the previous transaction
@ -199,7 +199,7 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const txt = " withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound; const txt = "🏦withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound;
finalEventList.push({ finalEventList.push({
eventType: "Withdraw", eventType: "Withdraw",
eventDescription: txt, eventDescription: txt,
@ -218,7 +218,7 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const txt = " withdrew " + amount.toFixed(2) + " LPT earned fees"; const txt = "🏦withdrew " + amount.toFixed(2) + " LPT earned fees";
finalEventList.push({ finalEventList.push({
eventType: "Withdraw", eventType: "Withdraw",
eventDescription: txt, eventDescription: txt,
@ -238,7 +238,7 @@ export const getEvents = () => async dispatch => {
eventContainsTranscoderUpdate = true; eventContainsTranscoderUpdate = true;
const amount1 = parseFloat(eventObj.data.rewardCut) / 10000; const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
const amount2 = 100 - (eventObj.data.feeShare / 10000); const amount2 = 100 - (eventObj.data.feeShare / 10000);
const txt = "changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%"; const txt = "🔄changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%";
finalEventList.push({ finalEventList.push({
eventType: "Update", eventType: "Update",
eventDescription: txt, eventDescription: txt,
@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => {
if (amount1 < thresholdStaking && amount2 < thresholdFees) { if (amount1 < thresholdStaking && amount2 < thresholdFees) {
continue; continue;
} }
let txt = "delegator claimed "; let txt = "💰delegator claimed ";
if (amount1 > thresholdStaking) { if (amount1 > thresholdStaking) {
txt += amount1.toFixed(2) + " LPT staking rewards"; txt += amount1.toFixed(2) + " LPT staking rewards";
if (amount2 > thresholdFees) { if (amount2 > thresholdFees) {
@ -290,7 +290,7 @@ export const getEvents = () => async dispatch => {
else if (eventObj.name === "Reward") { else if (eventObj.name === "Reward") {
eventContainsReward = true; eventContainsReward = true;
const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000; const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
let txt = "called reward worth " + amount1.toFixed(2) + " LPT"; let txt = "💸called reward worth " + amount1.toFixed(2) + " LPT";
if (Math.floor(amount1) == 69) { if (Math.floor(amount1) == 69) {
txt += "... Nice!"; txt += "... Nice!";
} }
@ -389,7 +389,7 @@ export const getTickets = () => async dispatch => {
// Always split off WithdrawStake as a separate Withdraw Event // Always split off WithdrawStake as a separate Withdraw Event
if (eventObj.name === "WinningTicketRedeemed") { if (eventObj.name === "WinningTicketRedeemed") {
const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000; const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000;
const txt = " redeemed a winning ticket worth " + amount.toFixed(4) + " Eth"; const txt = "🎟️winning ticket worth " + amount.toFixed(4) + " Eth";
finalTicketList.push({ finalTicketList.push({
eventType: "RedeemTicket", eventType: "RedeemTicket",
eventDescription: txt, eventDescription: txt,

8
src/components/OrchAddressViewer.js
View File

@ -1,18 +1,14 @@
import React from "react"; import React from "react";
import ReactTooltip from "react-tooltip";
const Address = (obj) => { const Address = (obj) => {
return ( return (
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}> <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
<a className="selectOrchLight" target="_blank" rel="noopener noreferrer" 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} >
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}> <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
<img alt="" src="livepeer.png" width="20" height="20" /> <img alt="" src="livepeer.png" width="20" height="20" />
<span className="elipsText elipsOnMobile">{obj.address}</span> <span className="elipsText elipsOnMobile" style={{ marginRight: "0.5em" }}>{obj.address}</span>
</div> </div>
</a> </a>
<ReactTooltip id={obj.seed} place="top" effect="solid">
{"https://explorer.livepeer.org/accounts/" + obj.address}
</ReactTooltip>
</div> </div>
) )
} }

4
src/components/OrchDelegatorViewer.js
View File

@ -12,8 +12,8 @@ const OrchDelegatorViewer = (obj) => {
<h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3> <h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3>
</div> </div>
<div className="content-wrapper"> <div className="content-wrapper">
<ScrollContainer className="overflow-container" hideScrollbars={false}> <ScrollContainer className="overflow-container" hideScrollbars={false} style={{ }}>
<div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px' }}> <div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px', margin: '0.5em' }}>
{ {
delegators.map((delObj, idx) => { delegators.map((delObj, idx) => {
return ( return (

6
src/components/OrchInfoViewer.js
View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import Stat from "./statViewer"; import Stat from "./statViewer";
import ReactTooltip from "react-tooltip";
import Address from "./OrchAddressViewer"; import Address from "./OrchAddressViewer";
function updateClipboard(newClip) { function updateClipboard(newClip) {
@ -88,14 +87,11 @@ const OrchInfoViewer = (obj) => {
<Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} /> <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
</div> </div>
<div className="strokeSmollLeft" style={{ display: "flex" }}> <div className="strokeSmollLeft" style={{ display: "flex" }}>
<button style={{ marginBottom: '1em' }} className="selectOrchLight" data-tip data-for="registerTip" onClick={() => { <button style={{ marginBottom: '1em' }} className="selectOrchLight" onClick={() => {
copyLink(shareUrl); copyLink(shareUrl);
}}> }}>
<img alt="" src="clipboard.svg" width="20em" height="20em" /> <img alt="" src="clipboard.svg" width="20em" height="20em" />
</button> </button>
<ReactTooltip id="registerTip" place="top" effect="solid">
Copy to clipboard
</ReactTooltip>
</div> </div>
</div> </div>
</div> </div>

14
src/components/eventButton.js
View File

@ -24,14 +24,14 @@ const EventButton = (obj) => {
if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) { if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) {
if (obj.eventObj.eventTo) { if (obj.eventObj.eventTo) {
eventTo = eventTo =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}> <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}> <a className="selectOrch" style={{ cursor: 'alias' }} 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 }} /> <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a> </a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} > <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
<span className="elipsText">🔎</span> <span className="elipsText">🔎</span>
</button> </button>
<span>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</span> <span>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} > <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventTo}</span> <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventTo}</span>
</button> </button>
@ -39,14 +39,14 @@ const EventButton = (obj) => {
} }
if (obj.eventObj.eventFrom) { if (obj.eventObj.eventFrom) {
eventFrom = eventFrom =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}> <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}> <a className="selectOrch" style={{ cursor: 'alias' }} 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 }} /> <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a> </a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} > <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
<span className="elipsText">🔎</span> <span className="elipsText">🔎</span>
</button> </button>
<span>From&nbsp;&nbsp;:</span> <span>From&nbsp;&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }}> <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }}>
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventFrom}</span> <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventFrom}</span>
</button> </button>
@ -54,14 +54,14 @@ const EventButton = (obj) => {
} }
if (obj.eventObj.eventCaller) { if (obj.eventObj.eventCaller) {
eventCaller = eventCaller =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}> <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}> <a className="selectOrch" style={{ cursor: 'alias' }} 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 }} /> <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a> </a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} > <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
<span className="elipsText">🔎</span> <span className="elipsText">🔎</span>
</button> </button>
<span>Caller&nbsp;:</span> <span>Caller&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} > <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventCaller}</span> <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventCaller}</span>
</button> </button>
@ -86,7 +86,7 @@ const EventButton = (obj) => {
</div> </div>
<div className="row"> <div className="row">
<p className="row withWrap" style={{ maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}> <p className="row withWrap" style={{ maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
💬 {obj.eventObj.eventDescription} {obj.eventObj.eventDescription}
</p> </p>
</div> </div>
<div className="rowAlignLeft"> <div className="rowAlignLeft">

60
src/components/eventViewer.js
View File

@ -5,15 +5,15 @@ import Filter from './filterComponent';
import ReactPaginate from 'react-paginate'; import ReactPaginate from 'react-paginate';
/// A scrollable and filterable list of EventButtons /// A scrollable and filterable list of EventButtons
const activationColour = "rgba(23, 60, 122, 0.3)"; const claimColour = "rgba(25, 158, 29, 0.4)";
const rewardColour = "rgba(20, 99, 29, 0.3)"; const stakeColour = "rgba(25, 158, 147, 0.4)";
const updateColour = "rgba(122, 63, 23, 0.3)"; const ticketRedeemColour = "rgba(25, 98, 158, 0.4)";
const withdrawStakeColour = "rgba(115, 110, 22, 0.3)"; const rewardColour = "rgba(25, 27, 158, 0.4)";
const stakeColour = "rgba(71, 23, 122, 0.3)"; const unbondColour = "rgba(105, 25, 158, 0.4)";
const claimColour = "rgba(77, 91, 42, 0.3)"; const updateColour = "rgba(158, 25, 52, 0.4)";
const unbondColour = "rgba(122, 23, 51, 0.3)"; const withdrawStakeColour = "rgba(158, 98, 25, 0.4)";
const ticketRedeemColour = "rgba(42, 44, 91, 0.3)"; const activationColour = "rgba(154, 158, 25, 0.4)";
const greyColour = "rgba(122, 128, 127, 0.3)"; const greyColour = "rgba(122, 128, 127, 0.4)";
const defaultIncrementMaxShown = 100; const defaultIncrementMaxShown = 100;
@ -244,16 +244,31 @@ const EventViewer = (obj) => {
</div> </div>
</ScrollContainer> </ScrollContainer>
<div className="strokeSmollLeft" style={{ marginRight: "1em" }}> <div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour, marginTop: '0.7em' }} onClick={() => { <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour, marginTop: '0.7em' }} onClick={() => {
setFilterActivated(!filterActivated); setDelegatorRewardActivated(!delegatorRewardActivated);
}}> }}>
<h3>Activated</h3> <h3>Claim</h3>
</button>
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
setStakeActivated(!stakeActivated);
}}>
<h3>Stake</h3>
</button>
<button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
setTicketRedemptionActivated(!ticketRedemptionActivated);
}}>
<h3>Tickets</h3>
</button> </button>
<button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => { <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
setRewardActivated(!rewardActivated); setRewardActivated(!rewardActivated);
}}> }}>
<h3>Reward</h3> <h3>Reward</h3>
</button> </button>
<button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
setUnbondActivated(!unbondActivated);
}}>
<h3>Unbond</h3>
</button>
<button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => { <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
setUpdateActivated(!updateActivated); setUpdateActivated(!updateActivated);
}}> }}>
@ -264,25 +279,10 @@ const EventViewer = (obj) => {
}}> }}>
<h3>Withdraw</h3> <h3>Withdraw</h3>
</button> </button>
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => { <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
setStakeActivated(!stakeActivated); setFilterActivated(!filterActivated);
}}> }}>
<h3>Stake</h3> <h3>Activated</h3>
</button>
<button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
setDelegatorRewardActivated(!delegatorRewardActivated);
}}>
<h3>Claim</h3>
</button>
<button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
setUnbondActivated(!unbondActivated);
}}>
<h3>Unbond</h3>
</button>
<button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
setTicketRedemptionActivated(!ticketRedemptionActivated);
}}>
<h3>Tickets</h3>
</button> </button>
</div> </div>
</div> </div>

6
src/pages/livepeer.js
View File

@ -76,16 +76,16 @@ const Livepeer = (obj) => {
}}> }}>
<h1 style={{ margin: 0, padding: 0 }}>🏠</h1> <h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
</button> </button>
<h4 className="rowAlignLeft withWrap elipsOnMobile">{headerString}</h4> <h4 className="rowAlignLeft withWrap showNeverOnMobile">{headerString}</h4>
</div> </div>
<div className='rowAlignRight'> <div className='rowAlignRight'>
<button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => { <button className="homeButton" onClick={() => {
dispatch(clearOrchestrator()); dispatch(clearOrchestrator());
setSearchTerm(""); setSearchTerm("");
setAmountFilter(0); setAmountFilter(0);
setMaxAmount(defaultMaxShown); setMaxAmount(defaultMaxShown);
}}> }}>
<h4>✖️ Clear</h4> <h4 style={{margin: 0, padding: 0}}>✖️ Clear</h4>
</button> </button>
<p>Sidebar</p> <p>Sidebar</p>
<div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}> <div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>

59
src/style.css
View File

@ -42,9 +42,9 @@ code, pre{
} }
h2, h3, h1, h4, h5, h6 { h2, h3, h1, h4, h5, h6 {
text-shadow: 0.5px 0.5px 0.8px #948dff; text-shadow: 0.5px 0.5px 0.8px #9493aa;
color: #1a1b26; color: #1a1b26;
cursor: default; cursor: inherit;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -61,7 +61,7 @@ h2, h3, h1, h4, h5, h6 {
} }
p { p {
text-shadow: 0.5px 0.5px 0.8px #948dff; text-shadow: 0.5px 0.5px 0.8px #9493aa;
color: #1a1b26; color: #1a1b26;
font-size: 1.2em; font-size: 1.2em;
margin: 0.3em; margin: 0.3em;
@ -75,19 +75,19 @@ p {
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: rgba(146, 144, 196, 0.9); background-color: rgba(61, 61, 66, 0.3);
border-radius: 10px; border-radius: 10px;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(51, 50, 78, 0.9); background-color: rgba(44, 44, 46, 0.7);
border-radius: 10px; border-radius: 10px;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(25, 25, 59, 0.9); background-color: rgba(35, 35, 39, 0.9);
} }
#dvdlogo { #dvdlogo {
@ -145,7 +145,7 @@ svg {
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: rgba(180, 175, 252, 0.80); background-color: rgba(214, 214, 214, 0.80);
} }
#bodyContent { #bodyContent {
height: calc( 100vh - 50px); height: calc( 100vh - 50px);
@ -155,9 +155,9 @@ svg {
overflow: hidden; overflow: hidden;
} }
#sideContent { #sideContent {
background-color: rgba(180, 175, 252, 0.80); background-color: rgba(214, 214, 214, 0.8);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 9px 13px 8px 8px rgba(8, 7, 56, 0.692); box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692);
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
width: 400px; width: 400px;
overflow-y: auto; overflow-y: auto;
@ -187,7 +187,7 @@ svg {
} }
.lightText { .lightText {
color: rgba(162, 161, 255, 0.5); color: rgba(176, 175, 218, 0.7);
} }
.darkText { .darkText {
@ -205,7 +205,7 @@ svg {
user-select: text; user-select: text;
font-size: small; font-size: small;
color: rgba(15, 15, 15, 0.8750); color: rgba(15, 15, 15, 0.8750);
background-color: rgba(148, 154, 184, 0.8); background-color: rgba(206, 206, 206, 0.8);
-webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); -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); -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); box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
@ -328,8 +328,8 @@ svg {
padding: 8px; padding: 8px;
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;
background-color: rgba(163, 161, 255, 0.9); background-color: rgba(157, 157, 158, 0.9);
box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -339,7 +339,7 @@ svg {
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
.waveButton:hover { .waveButton:hover {
background-color: rgba(122, 121, 207, 0.9); background-color: rgba(192, 195, 200, 0.8);
} }
.waveButton:disabled { .waveButton:disabled {
cursor: default; cursor: default;
@ -360,11 +360,11 @@ svg {
z-index: 10; z-index: 10;
} }
.homeButton:hover { .homeButton:hover {
box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
.homeButton:active { .homeButton:active {
box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
} }
.homeButton:disabled { .homeButton:disabled {
cursor: default; cursor: default;
@ -385,30 +385,29 @@ svg {
margin-bottom: 0.7em; margin-bottom: 0.7em;
} }
.nonHomeButton:hover { .nonHomeButton:hover {
box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
.nonHomeButton:active { .nonHomeButton:active {
box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
} }
.active { .active {
box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
} }
.searchField { .searchField {
margin: auto; margin: auto;
display: flex; display: flex;
background-color: rgba(44, 96, 238, 0.199); background-color: rgba(107, 111, 122, 0.199);
padding: 5px; padding: 5px;
border-radius: 20px; border-radius: 20px;
color:rgba(8, 7, 56, 0.747); color:rgba(20, 20, 19, 0.747);
} }
.searchField::placeholder { .searchField::placeholder {
color:rgba(8, 7, 56, 0.445); color:rgba(20, 20, 19, 0.445);
} }
.searchField:focus { .searchField:focus {
outline: none !important; outline: none !important;
border:2px solid rgba(49, 13, 134, 0.459); box-shadow: 0px 0px 3px 2px rgba(99, 109, 112, 0.8);
box-shadow: 0px 0px 3px 2px rgba(53, 118, 138, 0.8);
} }
.main-container { .main-container {
@ -450,8 +449,8 @@ svg {
} }
.roundedOpaque { .roundedOpaque {
background-color: rgba(180, 175, 252, 0.80); background-color: rgba(214, 214, 214, 0.80);
box-shadow: 9px 13px 18px 8px rgba(8, 7, 56, 0.692); box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692);
border-radius: 30px; border-radius: 30px;
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
@ -479,7 +478,7 @@ svg {
} }
.selectOrch, .selectOrch a{ .selectOrch, .selectOrch a{
text-shadow: 0.5px 0.5px 0.8px #948dff; text-shadow: 0.5px 0.5px 0.8px #9493aa;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
@ -492,7 +491,7 @@ svg {
} }
.selectOrchLight, .selectOrchLight a{ .selectOrchLight, .selectOrchLight a{
text-shadow: 0.5px 0.5px 0.8px #948dff; text-shadow: 0.5px 0.5px 0.8px #9493aa;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
@ -501,7 +500,7 @@ svg {
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: rgba(115, 114, 146, 0.9); background-color: rgba(187, 187, 187, 0.9);
border-radius: 1em; border-radius: 1em;
} }
@ -541,7 +540,7 @@ svg {
} }
.disabled { .disabled {
background-color: #384e5c; background-color: #495258;
left: 2px; left: 2px;
} }