mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
More code cleanup
This commit is contained in:
parent
d517be8a39
commit
b5b9f49f56
@ -119,14 +119,14 @@ export const getEvents = () => async dispatch => {
|
|||||||
eventFrom = "";
|
eventFrom = "";
|
||||||
eventTo = "";
|
eventTo = "";
|
||||||
if (eventContainsBond) {
|
if (eventContainsBond) {
|
||||||
const subtext = "activated their orchestrator";
|
const subtext = "activated";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
tmpAmount.toFixed(2) + " LPT stake",
|
tmpAmount.toFixed(2) + " LPT stake",
|
||||||
"round " + tmpWhen
|
"round " + tmpWhen
|
||||||
]
|
]
|
||||||
eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
|
eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
|
||||||
} else {
|
} else {
|
||||||
const subtext = "reactivated their orchestrator";
|
const subtext = "reactivated";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
"round " + tmpWhen
|
"round " + tmpWhen
|
||||||
]
|
]
|
||||||
@ -154,7 +154,7 @@ export const getEvents = () => async dispatch => {
|
|||||||
else if (eventContainsRebond) {
|
else if (eventContainsRebond) {
|
||||||
eventType = "Stake";
|
eventType = "Stake";
|
||||||
eventColour = stakeColour;
|
eventColour = stakeColour;
|
||||||
const subtext = "changed stake amount";
|
const subtext = "changed stake";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
tmpAmount.toFixed(2) + " LPT"
|
tmpAmount.toFixed(2) + " LPT"
|
||||||
]
|
]
|
||||||
@ -173,7 +173,7 @@ export const getEvents = () => async dispatch => {
|
|||||||
<Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
|
<Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
|
||||||
} else if (eventFrom === eventTo) {
|
} else if (eventFrom === eventTo) {
|
||||||
eventFrom = "";
|
eventFrom = "";
|
||||||
const subtext = "changed stake amount";
|
const subtext = "changed stake";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
tmpAmount.toFixed(2) + " LPT"
|
tmpAmount.toFixed(2) + " LPT"
|
||||||
]
|
]
|
||||||
@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => {
|
|||||||
if (amount < thresholdFees) {
|
if (amount < thresholdFees) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
const subtext = "withdrew fee rewards";
|
const subtext = "withdrew fees";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
amount.toFixed(4) + " Eth"
|
amount.toFixed(4) + " Eth"
|
||||||
]
|
]
|
||||||
@ -286,7 +286,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 subtext = "changed commission rates";
|
const subtext = "changed commission";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
amount1.toFixed(2) + "% on staking rewards",
|
amount1.toFixed(2) + "% on staking rewards",
|
||||||
amount2.toFixed(2) + "% on transcoding fees"
|
amount2.toFixed(2) + "% on transcoding fees"
|
||||||
@ -315,9 +315,9 @@ export const getEvents = () => async dispatch => {
|
|||||||
if (amount1 < thresholdStaking && amount2 < thresholdFees) {
|
if (amount1 < thresholdStaking && amount2 < thresholdFees) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
const subtext = "delegator claimed rewards";
|
const subtext = "delegator claimed";
|
||||||
const descriptions = [
|
const descriptions = [
|
||||||
"of " + (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds",
|
(eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds",
|
||||||
"+" + amount1.toFixed(2) + " LPT rewards",
|
"+" + amount1.toFixed(2) + " LPT rewards",
|
||||||
"+" + amount2.toFixed(4) + " Eth fees"
|
"+" + amount2.toFixed(4) + " Eth fees"
|
||||||
]
|
]
|
||||||
|
@ -6,15 +6,15 @@ const Block = (obj) => {
|
|||||||
dateObj.setUTCSeconds(thisEpoch);
|
dateObj.setUTCSeconds(thisEpoch);
|
||||||
const [thisDate, thisTime] = dateObj.toISOString().split('T');
|
const [thisDate, thisTime] = dateObj.toISOString().split('T');
|
||||||
return (
|
return (
|
||||||
<div className="rowAlignLeft" style={{ width: '100%', marginTop: '1em' }}>
|
<div className="rowAlignLeft" style={{ marginTop: '1em' }}>
|
||||||
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
|
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
|
||||||
<img alt="" src="arb.svg" width="20em" height="20em" />
|
<img alt="" src="arb.svg" width="20em" height="20em" />
|
||||||
</a>
|
</a>
|
||||||
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" 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}>
|
||||||
<h3 style={{ margin: 0, padding: '0.2em', cursor: 'alias' }}>🔗</h3>
|
<h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3>
|
||||||
</a>
|
</a>
|
||||||
<span className="rowAlignRight elipsText">
|
<span className="rowAlignRight darkText mobileSmallerFont">
|
||||||
<p className="darkText mobileSmallerFont">UTC 📅{thisDate} - {thisTime.split('.')[0]} </p>
|
UTC 📅{thisDate} - {thisTime.split('.')[0]}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -94,11 +94,11 @@ const ContractPrices = (obj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
|
<div className="stroke" style={{ maxWidth: "300px" }}>
|
||||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
<div className="row">
|
||||||
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
|
<h3>Smart contract prices</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
<div className="stroke">
|
||||||
<div className='rowAlignRight'>
|
<div className='rowAlignRight'>
|
||||||
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} />
|
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} />
|
||||||
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} />
|
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} />
|
||||||
|
@ -2,11 +2,11 @@ import React from "react";
|
|||||||
|
|
||||||
const Address = (obj) => {
|
const Address = (obj) => {
|
||||||
return (
|
return (
|
||||||
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
|
<div className="rowAlignLeft">
|
||||||
<a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
|
<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">
|
||||||
<img alt="" src="livepeer.png" width="20" height="20" />
|
<img alt="" src="livepeer.png" width="20" height="20" />
|
||||||
<span className="elipsText elipsOnMobile" style={{ marginRight: "0.5em" }}>{obj.address}</span>
|
<span className="elipsText elipsOnMobile">{obj.address}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,6 +39,7 @@ const OrchDelegatorViewer = (obj) => {
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<h3>The selected Orchestrator has no Delegators</h3>
|
<h3>The selected Orchestrator has no Delegators</h3>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="verticalDivider"/>
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div >
|
||||||
)
|
)
|
||||||
|
@ -69,22 +69,22 @@ const OrchInfoViewer = (obj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row sideMargin">
|
<div className="row">
|
||||||
<div className="stroke stretchAndBetween sideMargin">
|
<div className="stroke sideMargin">
|
||||||
<div className="verticalDivider" />
|
<div className="verticalDivider" />
|
||||||
<div className="row" style={{ borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
|
<div className="row">
|
||||||
<a href={thisUrl}>
|
<a href={thisUrl}>
|
||||||
<h3 >Orchestrator Info</h3>
|
<h3 >Orchestrator Info</h3>
|
||||||
<Address address={thisID} />
|
<Address address={thisID} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="stretchAndBetween sideMargin" >
|
<div className="stretchAndBetween" style={{ borderTop: '2px solid rgba(15,15,15,0.05)', marginTop: '0.2em' }} >
|
||||||
<Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
|
<Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
|
||||||
</div>
|
</div>
|
||||||
<div className="stretchAndBetween sideMargin" >
|
<div className="stretchAndBetween" >
|
||||||
<Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
|
<Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
|
||||||
</div>
|
</div>
|
||||||
<div className="stretchAndBetween sideMargin" >
|
<div className="stretchAndBetween" >
|
||||||
<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="stretchAndBetween strokeSmollLeft">
|
<div className="stretchAndBetween strokeSmollLeft">
|
||||||
|
@ -1,20 +1,13 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {
|
|
||||||
getOrchestratorInfo
|
|
||||||
} from "../actions/livepeer";
|
|
||||||
import { useDispatch } from 'react-redux';
|
|
||||||
import Block from "./BlockViewer";
|
import Block from "./BlockViewer";
|
||||||
|
import EventButtonAddress from "./eventButtonAddress";
|
||||||
|
|
||||||
/// Displays a single event. Sets selected Orchestrator info in the redux store
|
/// Displays a single event. Sets selected Orchestrator info in the redux store
|
||||||
|
|
||||||
const EventButton = (obj) => {
|
const EventButton = (obj) => {
|
||||||
const dispatch = useDispatch();
|
|
||||||
|
|
||||||
|
|
||||||
let eventTo;
|
let eventTo;
|
||||||
let eventFrom;
|
let eventFrom;
|
||||||
let eventCaller;
|
let eventCaller;
|
||||||
let eventRightAddr;
|
|
||||||
if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
|
if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
|
||||||
obj.eventObj.eventFrom = "";
|
obj.eventObj.eventFrom = "";
|
||||||
}
|
}
|
||||||
@ -24,52 +17,16 @@ 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 }}>
|
<EventButtonAddress name="To : " address={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 }} />
|
|
||||||
</a>
|
|
||||||
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
|
|
||||||
<span className="elipsText">🔎</span>
|
|
||||||
</button>
|
|
||||||
<span>To : </span>
|
|
||||||
<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>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
if (obj.eventObj.eventFrom) {
|
if (obj.eventObj.eventFrom) {
|
||||||
eventFrom =
|
eventFrom =
|
||||||
<div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
|
<EventButtonAddress name="From : " address={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 }} />
|
|
||||||
</a>
|
|
||||||
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
|
|
||||||
<span className="elipsText">🔎</span>
|
|
||||||
</button>
|
|
||||||
<span>From : </span>
|
|
||||||
<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>
|
|
||||||
</button>
|
|
||||||
</div >
|
|
||||||
}
|
}
|
||||||
if (obj.eventObj.eventCaller) {
|
if (obj.eventObj.eventCaller) {
|
||||||
eventCaller =
|
eventCaller =
|
||||||
<div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
|
<EventButtonAddress name="Caller : " address={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 }} />
|
|
||||||
</a>
|
|
||||||
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
|
|
||||||
<span className="elipsText">🔎</span>
|
|
||||||
</button>
|
|
||||||
<span>Caller : </span>
|
|
||||||
<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>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
eventRightAddr = <div className="strokeSmollLeft" style={{ width: 'unset', padding: 0, margin: 0 }}>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let blockNumber;
|
let blockNumber;
|
||||||
@ -78,24 +35,29 @@ const EventButton = (obj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="stroke" style={{ width: '100%', padding: '0', margin: 0, marginBottom: '1.0em' }}>
|
<div className="strokeSmollLeft">
|
||||||
{blockNumber}
|
{blockNumber}
|
||||||
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, boxShadow: "5px 8px 5px 4px " + obj.eventObj.eventColour, padding: '0', margin: 0, width: '100%' }}>
|
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, opacity: 0.9, border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
|
||||||
<div className="rowAlignLeft" style={{ marginTop: '0.5em' }}>
|
<div className="halfVerticalDivider" />
|
||||||
|
<div className="rowAlignLeft">
|
||||||
{eventCaller}
|
{eventCaller}
|
||||||
</div>
|
</div>
|
||||||
<div className="row" style={{marginBottom: '0.5em', marginTop: '0.5em'}}>
|
<div className="halfVerticalDivider" />
|
||||||
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch' ,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)" }}>
|
<div className="row">
|
||||||
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: obj.eventObj.eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
||||||
{obj.eventObj.eventDescription}
|
{obj.eventObj.eventDescription}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="halfVerticalDivider" />
|
||||||
<div className="rowAlignLeft">
|
<div className="rowAlignLeft">
|
||||||
{eventFrom}
|
{eventFrom}
|
||||||
</div>
|
</div>
|
||||||
<div className="rowAlignLeft">
|
<div className="rowAlignLeft">
|
||||||
{eventTo}
|
{eventTo}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="halfVerticalDivider" />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="halfVerticalDivider" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
26
src/components/eventButtonAddress.js
Normal file
26
src/components/eventButtonAddress.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
getOrchestratorInfo
|
||||||
|
} from "../actions/livepeer";
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
|
const EventButtonAddress = (obj) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rowAlignLeft" style={{ width: '100%' }}>
|
||||||
|
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>
|
||||||
|
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
|
||||||
|
</a>
|
||||||
|
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
|
||||||
|
<span className="elipsText">🔎</span>
|
||||||
|
</button>
|
||||||
|
<span>{obj.name}</span>
|
||||||
|
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.address)) }} >
|
||||||
|
<span className="elipsText elipsOnMobileExtra">{obj.address}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EventButtonAddress;
|
@ -196,20 +196,21 @@ const EventViewer = (obj) => {
|
|||||||
let showMoreButton;
|
let showMoreButton;
|
||||||
if (hidden == 0) {
|
if (hidden == 0) {
|
||||||
showMoreButton =
|
showMoreButton =
|
||||||
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
|
<div className="row">
|
||||||
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}>
|
<div className="strokeSmollLeft" style={{ width: '100%' }}>
|
||||||
<p className="row withWrap" style={{ maxWidth: '600px' }}>
|
<p className="row buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}>
|
||||||
☑️ Reached end of results
|
☑️ Reached end of results
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
} else {
|
} else {
|
||||||
showMoreButton =
|
showMoreButton =
|
||||||
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
|
<div className="row">
|
||||||
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}>
|
<div className="strokeSmollLeft" style={{ width: '100%' }}>
|
||||||
<button className="row nonHomeButton buttonPadding" style={{ backgroundColor: greyColour }} onClick={() => {
|
<button className="row nonHomeButton buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}
|
||||||
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
|
onClick={() => {
|
||||||
}}>
|
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
|
||||||
|
}}>
|
||||||
<h3>🔄 Show More</h3>
|
<h3>🔄 Show More</h3>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -219,7 +220,7 @@ const EventViewer = (obj) => {
|
|||||||
let filterBit;
|
let filterBit;
|
||||||
if (obj.showFilter) {
|
if (obj.showFilter) {
|
||||||
filterBit =
|
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, width: '100%' }}>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<span>Showing {hidden + unfiltered} out of {limitShown} results</span>
|
<span>Showing {hidden + unfiltered} out of {limitShown} results</span>
|
||||||
</div>
|
</div>
|
||||||
@ -229,23 +230,25 @@ const EventViewer = (obj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
|
<div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
|
||||||
{filterBit}
|
{filterBit}
|
||||||
<div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
|
<div className="row" style={{ width: '100%', height: '100%' }}>
|
||||||
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "400px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
|
<div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
|
||||||
<div className="content-wrapper" style={{ width: '100%' }}>
|
<div className="content-wrapper" style={{ width: '100%' }}>
|
||||||
<ScrollContainer activationDistance={1} className="overflow-container"
|
<ScrollContainer activationDistance={1} className="overflow-container"
|
||||||
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
|
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
|
||||||
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
|
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
|
||||||
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
|
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
|
||||||
{eventList}
|
{eventList}
|
||||||
|
<div className="verticalDivider" />
|
||||||
{showMoreButton}
|
{showMoreButton}
|
||||||
|
<div className="verticalDivider" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ScrollContainer>
|
</ScrollContainer>
|
||||||
<div className="strokeSmollLeft sideMargin">
|
<div className="strokeSmollLeft sideMargin">
|
||||||
<div className="verticalDivider"/>
|
<div className="verticalDivider" />
|
||||||
<button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour}} onClick={() => {
|
<button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
|
||||||
setDelegatorRewardActivated(!delegatorRewardActivated);
|
setDelegatorRewardActivated(!delegatorRewardActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Claim</h3>
|
<h3>Claim</h3>
|
||||||
|
@ -42,7 +42,7 @@ const Grafana = (obj) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="verticalDivider"/>
|
<div className="verticalDivider"/>
|
||||||
<div className="stroke" >
|
<div className="stroke" >
|
||||||
<div className="flexContainer">
|
<div className="flexContainer makeItWide">
|
||||||
<div className="stroke">
|
<div className="stroke">
|
||||||
<div className="stroke roundedOpaque">
|
<div className="stroke roundedOpaque">
|
||||||
<div className="verticalDivider"/>
|
<div className="verticalDivider"/>
|
||||||
|
@ -239,6 +239,12 @@ svg {
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.halfVerticalDivider {
|
||||||
|
height: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
.smallVerticalDivider {
|
.smallVerticalDivider {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -254,7 +260,10 @@ svg {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: auto;
|
}
|
||||||
|
|
||||||
|
.makeItWide {
|
||||||
|
width: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forceVertical {
|
.forceVertical {
|
||||||
@ -500,6 +509,11 @@ svg {
|
|||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.onlyVerticalScroll {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.noCursor {
|
.noCursor {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
@ -514,8 +528,8 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.roundedOpaqueDark {
|
.roundedOpaqueDark {
|
||||||
background-color: rgba(17, 18, 23, 0.95);
|
background-color: rgba(5, 5, 10, 0.95);
|
||||||
box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692);
|
box-shadow: 9px 13px 18px 8px rgba(5, 5, 10, 0.6);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(6px);
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user