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

Lots of formatting fixes

Browse Source
This commit is contained in:
Marco van Dijk 2022-04-23 02:08:11 +02:00
parent 7e1fa3c8ed
commit 673ec3265e
9 changed files with 229 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/BlockViewer.js
View File

@ -6,14 +6,14 @@ 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={{ marginTop: '1em' }}> <div className="rowAlignLeft" style={{ margin: 0, marginTop: '1em', width: '100%'}}>
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}> <a className="selectOrch" style={{ cursor: 'alias', margin: 0 }} 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', margin: 0 }} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}>
<h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3> <h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3>
</a> </a>
<span className="rowAlignRight darkText mobileSmallerFont"> <span className="rowAlignRight darkText mobileSmallerFont" style={{margin: 0}}>
UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]} UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]}
</span> </span>
</div> </div>

36
src/components/MonthlyGraphs.js
View File

@ -98,11 +98,11 @@ const MonthlyGraphs = (obj) => {
<VictoryPie padding={0} data={pieList} x="address" y="sum" <VictoryPie padding={0} data={pieList} x="address" y="sum"
sortOrder="descending" sortOrder="descending"
sortKey="sum" sortKey="sum"
radius={300} radius={400}
width={620} width={800}
height={620} height={800}
innerRadius={50} innerRadius={140}
labelRadius={130} labelRadius={170}
cornerRadius={3} cornerRadius={3}
colorScale={[ colorScale={[
"#282678", "#282678",
@ -136,7 +136,7 @@ const MonthlyGraphs = (obj) => {
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
}, },
labels: { labels: {
fontSize: 16, zIndex: 999 fontSize: 24, zIndex: 999
} }
}} }}
labelPosition="centroid" labelPosition="centroid"
@ -180,11 +180,11 @@ const MonthlyGraphs = (obj) => {
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum" <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
sortOrder="descending" sortOrder="descending"
sortKey="sum" sortKey="sum"
radius={300} radius={400}
width={620} width={800}
height={620} height={800}
innerRadius={50} innerRadius={140}
labelRadius={130} labelRadius={170}
cornerRadius={3} cornerRadius={3}
colorScale={[ colorScale={[
"#282678", "#282678",
@ -218,7 +218,7 @@ const MonthlyGraphs = (obj) => {
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
}, },
labels: { labels: {
fontSize: 16, zIndex: 999 fontSize: 24, zIndex: 999
} }
}} }}
labelPosition="centroid" labelPosition="centroid"
@ -265,11 +265,11 @@ const MonthlyGraphs = (obj) => {
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum" <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
sortOrder="descending" sortOrder="descending"
sortKey="sum" sortKey="sum"
radius={300} radius={400}
width={620} width={800}
height={620} height={800}
innerRadius={50} innerRadius={140}
labelRadius={130} labelRadius={170}
cornerRadius={3} cornerRadius={3}
colorScale={[ colorScale={[
"#282678", "#282678",
@ -303,7 +303,7 @@ const MonthlyGraphs = (obj) => {
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
}, },
labels: { labels: {
fontSize: 16, zIndex: 999 fontSize: 24, zIndex: 999
} }
}} }}
labelPosition="centroid" labelPosition="centroid"

2
src/components/OrchDelegatorViewer.js
View File

@ -52,7 +52,7 @@ const OrchDelegatorViewer = (obj) => {
<div className="flexContainer forceWrap" key={"delegator" + idx}> <div className="flexContainer forceWrap" key={"delegator" + idx}>
<div className="rowAlignLeft"> <div className="rowAlignLeft">
<div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} > <div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
<h3>{idx}</h3> <h3>{idx + 1}</h3>
</div> </div>
<div className="rowAlignLeft"> <div className="rowAlignLeft">
<Address address={delObj.id} seed={"delegator" + idx + delObj.id} /> <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />

24
src/components/eventButton.js
View File

@ -122,15 +122,15 @@ const EventButton = (obj) => {
if (eventTo || eventFrom || eventCaller) { if (eventTo || eventFrom || eventCaller) {
if (eventTo) { if (eventTo) {
eventTo = eventTo =
<EventButtonAddress name="To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;" address={eventTo} setSearchTerm={obj.setSearchTerm} /> <EventButtonAddress name="To" address={eventTo} setSearchTerm={obj.setSearchTerm} />
} }
if (eventFrom) { if (eventFrom) {
eventFrom = eventFrom =
<EventButtonAddress name="From&nbsp;&nbsp;:&nbsp;" address={eventFrom} setSearchTerm={obj.setSearchTerm} /> <EventButtonAddress name="From" address={eventFrom} setSearchTerm={obj.setSearchTerm} />
} }
if (eventCaller) { if (eventCaller) {
eventCaller = eventCaller =
<EventButtonAddress name="Caller&nbsp;:&nbsp;" address={eventCaller} setSearchTerm={obj.setSearchTerm} /> <EventButtonAddress name="" address={eventCaller} setSearchTerm={obj.setSearchTerm} />
} }
} }
@ -140,11 +140,13 @@ const EventButton = (obj) => {
} }
return ( return (
<div className="strokeSmollLeft" style={{ width: '100%', minWidth: '200px', maxWidth: '500px' }}> <div className="strokeSmollLeft" style={{ width: '100%', margin: 0, padding: 0 }}>
<div className="row" style={{ paddingLeft: '1em', paddingRight: '1em' }}>
{blockNumber} {blockNumber}
<div className="strokeSmollLeft" style={{ width: "100%", borderRadius: "1.2em", backgroundColor: 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>
<div className="halfVerticalDivider" /> <div className="row" style={{ margin: 0, padding: 0 }}>
<div className="rowAlignLeft"> <div className="stroke infoContainer" style={{ width: "100%", padding: 0, margin: 0, minWidth: '200px', maxWidth: '400px' }}>
<div className="rowAlignLeft infoBar" style={{ margin: 0 }}>
{eventCaller} {eventCaller}
</div> </div>
<div className="halfVerticalDivider" /> <div className="halfVerticalDivider" />
@ -154,13 +156,15 @@ const EventButton = (obj) => {
</div> </div>
</div> </div>
<div className="halfVerticalDivider" /> <div className="halfVerticalDivider" />
<div className="rowAlignLeft"> <div className="stroke infoBar">
<div className="rowAlignLeft" style={{ margin: 0 }}>
{eventFrom} {eventFrom}
</div> </div>
<div className="rowAlignLeft"> <div className="rowAlignLeft" style={{ margin: 0 }}>
{eventTo} {eventTo}
</div> </div>
<div className="halfVerticalDivider" /> </div>
</div>
</div> </div>
<div className="halfVerticalDivider" /> <div className="halfVerticalDivider" />
</div> </div>

38
src/components/eventButtonAddress.js
View File

@ -3,6 +3,7 @@ import {
getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent
} from "../actions/livepeer"; } from "../actions/livepeer";
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Text } from '@mantine/core';
const EventButtonAddress = (obj) => { const EventButtonAddress = (obj) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -122,44 +123,48 @@ const EventButtonAddress = (obj) => {
let thisName; let thisName;
let thisIcon; let thisIcon;
if (orchInfo && orchInfo.domain) { if (orchInfo && orchInfo.domain) {
thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.domain}</h4>; thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%' }} >{orchInfo.domain}</Text>;
if (orchInfo.avatar) { if (orchInfo.avatar) {
thisIcon = thisIcon =
<a className="selectOrch" style={{ marginRight: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} > <a className="selectOrch" style={{ padding: '0.3em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
<img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: '0.2em', padding: '0.2em' }} /> <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
</a > </a >
} }
} else if (orchInfo && (orchInfo.name || orchInfo.image)) { } else if (orchInfo && (orchInfo.name || orchInfo.image)) {
if (orchInfo.name) { if (orchInfo.name) {
thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.name}</h4>; thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%' }} >{orchInfo.name}</Text>;
} else { } else {
thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>; thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%', maxWidth: '10vw' }} >{obj.address}</Text>;
} }
if (orchInfo.image) { if (orchInfo.image) {
thisIcon = thisIcon =
<a className="selectOrch" style={{ marginRight: '0.5em', cursor: 'grab'}} disabled> <a className="selectOrch" style={{ padding: '0.3em', cursor: 'grab' }} disabled>
<img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} style={{ margin: 0, padding: 0 }} /> <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
</a > </a >
} else { } else {
thisIcon = null; thisIcon = null;
} }
} else { } else {
thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>; thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%', maxWidth: '10vw' }} >{obj.address}</Text>;
thisIcon = null; thisIcon = null;
} }
return ( return (
<div className="rowAlignLeft" style={{ width: '100%' }}> <div className="rowAlignLeft" style={{
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}> width: '100%', display: 'flex', padding: 0, margin: 0,
justifyContent: 'spaceAround',
flexFlow: 'row wrap',
alignItems: 'stretch'
}}>
<a className="selectOrch" style={{ padding: '0.3em', 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 }} /> <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a> </a>
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} > <button className="selectOrch" style={{ padding: '0.3em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
<span className="elipsText">🔎</span> <span style={{ margin: 0 }}>🔎</span>
</button> </button>
<span>{obj.name}</span>
{thisIcon} {thisIcon}
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'help' }} onClick={() => { <button className="selectOrch" style={{ padding: '0.3em', cursor: 'help', flex: 1, flexGrow: 3 }} onClick={() => {
// Check if cached as an orchestrator // Check if cached as an orchestrator
if (livepeer.orchInfo) { if (livepeer.orchInfo) {
for (const thisOrch of livepeer.orchInfo) { for (const thisOrch of livepeer.orchInfo) {
@ -175,8 +180,11 @@ const EventButtonAddress = (obj) => {
} }
dispatch(getOrchestratorInfo(obj.address)); dispatch(getOrchestratorInfo(obj.address));
}} > }} >
<span className="elipsText elipsOnMobileExtra">{thisName}</span> <div className="row">
<span>{obj.name}</span> {thisName}
</div>
</button> </button>
</div> </div>
) )
} }

13
src/components/eventViewer.js
View File

@ -453,15 +453,14 @@ const EventViewer = (obj) => {
searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} /> searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} />
</div> </div>
} }
return ( return (
<div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}> <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
{filterBit} {filterBit}
<div className="row" style={{ width: '100%', height: '100%' }}> <div className="row" style={{ width: '100%', height: '100%' }}>
<div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}> <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" hideScrollbars={false} style={{ width: '100%' }}> <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%', overflowX: 'hidden' }}>
<div className="overflow-content" style={{ cursor: 'grab', padding: 0 }}> <div className="overflow-content" style={{ cursor: 'grab', padding: 0, width: '100%' }}>
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} > <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
<div className="verticalDivider" /> <div className="verticalDivider" />
{ {
@ -471,9 +470,9 @@ const EventViewer = (obj) => {
return ( return (
<div className="flexContainer forceWrap" style={{ marginLeft: '0.2em', marginRight: '0.2em', width: '100%' }} key={"ticket-" + idx}> <div className="flexContainer forceWrap" style={{ marginLeft: '0.2em', marginRight: '0.2em', width: '100%' }} key={"ticket-" + idx}>
<div className="rowAlignLeft"> <div className="rowAlignLeft">
<div className="strokeSmollLeft showNeverOnMobile" style={{ marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }} > {/* <div className="showNeverOnMobile" >
<h3>{idx}</h3> <h3 style={{ width: '2em', marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }}>{idx + 1}</h3>
</div> </div> */}
<div className="row"> <div className="row">
{delObj} {delObj}
</div> </div>
@ -533,7 +532,7 @@ const EventViewer = (obj) => {
</div> </div>
</div> </div>
<div className="row" style={{ marginTop: '1em', marginBottom: '1em', justifyContent: 'space-evenly', display: "flex" }}> <div className="row" style={{ marginTop: '1em', marginBottom: '1em', justifyContent: 'space-evenly', display: "flex" }}>
<Pagination page={activePage} onChange={setPage} total={(limitShown + (itemsPerPage - (limitShown % itemsPerPage))) / itemsPerPage} siblings={3} initialPage={1} /> <Pagination page={activePage} onChange={setPage} total={(limitShown + (itemsPerPage - (limitShown % itemsPerPage))) / itemsPerPage} siblings={2} initialPage={1} />
</div> </div>
</div> </div>
</div> </div>

4
src/pages/MonthlyStats.js
View File

@ -13,7 +13,7 @@ const MonthlyStats = (obj) => {
} else if (activePage == 2) { } else if (activePage == 2) {
thisColour = "indigo"; thisColour = "indigo";
} else if (activePage == 3) { } else if (activePage == 3) {
thisColour = "red"; thisColour = "gray";
} }
return ( return (
@ -98,7 +98,7 @@ const MonthlyStats = (obj) => {
data={[ data={[
{ label: 'Info', value: '1' }, { label: 'Info', value: '1' },
{ label: 'Graph', value: '2' }, { label: 'Graph', value: '2' },
{ label: 'Score', value: '3' } { label: 'Fees', value: '3' }
]} ]}
/> />
</div> </div>

8
src/pages/stats.js
View File

@ -28,10 +28,8 @@ const Stats = (obj) => {
</div> </div>
</div> </div>
<div id='bodyContent'> <div id='bodyContent'>
<div className="mainContent"> <div className="row">
<div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}> <div className="stroke roundedOpaque onlyVerticalScroll" style={{ minWidth: '350px', width: '50vw', maxWidth: '1200px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
<div className="row" style={{ width: '100%', height: '100%' }}>
<div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '300px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
<div className="content-wrapper" style={{ width: '100%' }}> <div className="content-wrapper" style={{ width: '100%' }}>
<div className="overflow-container"> <div className="overflow-container">
<div className="overflow-content" style={{ padding: 0 }}> <div className="overflow-content" style={{ padding: 0 }}>
@ -148,8 +146,6 @@ const Stats = (obj) => {
</div> </div>
</div > </div >
</div > </div >
</div >
</div >
); );
} }

41
src/style.css
View File

@ -70,7 +70,7 @@ p {
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 15px;
border-radius: 10px; border-radius: 10px;
} }
@ -228,6 +228,42 @@ svg {
border-radius: 1em; border-radius: 1em;
} }
.infoBar {
cursor: default;
text-align: start;
padding: 0;
margin: 0;
user-select: text;
font-size: small;
color: rgba(15, 15, 15, 0.8750);
background-color: rgba(192, 188, 202, 0.335);
-webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
-moz-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border-radius: 0.5em;
}
.infoContainer {
cursor: default;
text-align: start;
padding: 0;
margin: 0;
user-select: text;
font-size: small;
color: rgba(15, 15, 15, 0.8750);
background: rgba(2, 0, 36, 0.5);
background: linear-gradient(120deg, rgba(4, 3, 24, 0.10) 0%, rgba(78, 78, 85, 0.05) 35%, rgba(49, 79, 85, 0.10) 100%);
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border-radius: 0.5em;
}
.insetEffect { .insetEffect {
background-color: rgba(206, 206, 206, 0.26); background-color: rgba(206, 206, 206, 0.26);
-webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05); -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05);
@ -576,6 +612,9 @@ svg {
text-shadow: 0.5px 0.5px 0.8px #9493aa; text-shadow: 0.5px 0.5px 0.8px #9493aa;
background-color: transparent; background-color: transparent;
border: none; border: none;
justify-content: center;
align-items: center;
display: flex;
} }
.selectOrch:hover, .selectOrch a:hover{ .selectOrch:hover, .selectOrch a:hover{