mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
Lots of formatting fixes
This commit is contained in:
parent
7e1fa3c8ed
commit
673ec3265e
@ -6,14 +6,14 @@ const Block = (obj) => {
|
||||
dateObj.setUTCSeconds(thisEpoch);
|
||||
const [thisDate, thisTime] = dateObj.toISOString().split('T');
|
||||
return (
|
||||
<div className="rowAlignLeft" style={{ marginTop: '1em' }}>
|
||||
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
|
||||
<div className="rowAlignLeft" style={{ margin: 0, marginTop: '1em', width: '100%'}}>
|
||||
<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" />
|
||||
</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>
|
||||
</a>
|
||||
<span className="rowAlignRight darkText mobileSmallerFont">
|
||||
<span className="rowAlignRight darkText mobileSmallerFont" style={{margin: 0}}>
|
||||
UTC 📅{thisDate} - {thisTime.split('.')[0]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -98,11 +98,11 @@ const MonthlyGraphs = (obj) => {
|
||||
<VictoryPie padding={0} data={pieList} x="address" y="sum"
|
||||
sortOrder="descending"
|
||||
sortKey="sum"
|
||||
radius={300}
|
||||
width={620}
|
||||
height={620}
|
||||
innerRadius={50}
|
||||
labelRadius={130}
|
||||
radius={400}
|
||||
width={800}
|
||||
height={800}
|
||||
innerRadius={140}
|
||||
labelRadius={170}
|
||||
cornerRadius={3}
|
||||
colorScale={[
|
||||
"#282678",
|
||||
@ -136,7 +136,7 @@ const MonthlyGraphs = (obj) => {
|
||||
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
||||
},
|
||||
labels: {
|
||||
fontSize: 16, zIndex: 999
|
||||
fontSize: 24, zIndex: 999
|
||||
}
|
||||
}}
|
||||
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"
|
||||
sortOrder="descending"
|
||||
sortKey="sum"
|
||||
radius={300}
|
||||
width={620}
|
||||
height={620}
|
||||
innerRadius={50}
|
||||
labelRadius={130}
|
||||
radius={400}
|
||||
width={800}
|
||||
height={800}
|
||||
innerRadius={140}
|
||||
labelRadius={170}
|
||||
cornerRadius={3}
|
||||
colorScale={[
|
||||
"#282678",
|
||||
@ -218,7 +218,7 @@ const MonthlyGraphs = (obj) => {
|
||||
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
||||
},
|
||||
labels: {
|
||||
fontSize: 16, zIndex: 999
|
||||
fontSize: 24, zIndex: 999
|
||||
}
|
||||
}}
|
||||
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"
|
||||
sortOrder="descending"
|
||||
sortKey="sum"
|
||||
radius={300}
|
||||
width={620}
|
||||
height={620}
|
||||
innerRadius={50}
|
||||
labelRadius={130}
|
||||
radius={400}
|
||||
width={800}
|
||||
height={800}
|
||||
innerRadius={140}
|
||||
labelRadius={170}
|
||||
cornerRadius={3}
|
||||
colorScale={[
|
||||
"#282678",
|
||||
@ -303,7 +303,7 @@ const MonthlyGraphs = (obj) => {
|
||||
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
||||
},
|
||||
labels: {
|
||||
fontSize: 16, zIndex: 999
|
||||
fontSize: 24, zIndex: 999
|
||||
}
|
||||
}}
|
||||
labelPosition="centroid"
|
||||
|
||||
@ -52,7 +52,7 @@ const OrchDelegatorViewer = (obj) => {
|
||||
<div className="flexContainer forceWrap" key={"delegator" + idx}>
|
||||
<div className="rowAlignLeft">
|
||||
<div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
|
||||
<h3>{idx}</h3>
|
||||
<h3>{idx + 1}</h3>
|
||||
</div>
|
||||
<div className="rowAlignLeft">
|
||||
<Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
|
||||
|
||||
@ -122,15 +122,15 @@ const EventButton = (obj) => {
|
||||
if (eventTo || eventFrom || eventCaller) {
|
||||
if (eventTo) {
|
||||
eventTo =
|
||||
<EventButtonAddress name="To : " address={eventTo} setSearchTerm={obj.setSearchTerm} />
|
||||
<EventButtonAddress name="To" address={eventTo} setSearchTerm={obj.setSearchTerm} />
|
||||
}
|
||||
if (eventFrom) {
|
||||
eventFrom =
|
||||
<EventButtonAddress name="From : " address={eventFrom} setSearchTerm={obj.setSearchTerm} />
|
||||
<EventButtonAddress name="From" address={eventFrom} setSearchTerm={obj.setSearchTerm} />
|
||||
}
|
||||
if (eventCaller) {
|
||||
eventCaller =
|
||||
<EventButtonAddress name="Caller : " address={eventCaller} setSearchTerm={obj.setSearchTerm} />
|
||||
<EventButtonAddress name="" address={eventCaller} setSearchTerm={obj.setSearchTerm} />
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,27 +140,31 @@ const EventButton = (obj) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="strokeSmollLeft" style={{ width: '100%', minWidth: '200px', maxWidth: '500px' }}>
|
||||
{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 className="halfVerticalDivider" />
|
||||
<div className="rowAlignLeft">
|
||||
{eventCaller}
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
<div className="row">
|
||||
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
||||
{eventDescription}
|
||||
<div className="strokeSmollLeft" style={{ width: '100%', margin: 0, padding: 0 }}>
|
||||
<div className="row" style={{ paddingLeft: '1em', paddingRight: '1em' }}>
|
||||
{blockNumber}
|
||||
</div>
|
||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
||||
<div className="stroke infoContainer" style={{ width: "100%", padding: 0, margin: 0, minWidth: '200px', maxWidth: '400px' }}>
|
||||
<div className="rowAlignLeft infoBar" style={{ margin: 0 }}>
|
||||
{eventCaller}
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
<div className="row">
|
||||
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
||||
{eventDescription}
|
||||
</div>
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
<div className="stroke infoBar">
|
||||
<div className="rowAlignLeft" style={{ margin: 0 }}>
|
||||
{eventFrom}
|
||||
</div>
|
||||
<div className="rowAlignLeft" style={{ margin: 0 }}>
|
||||
{eventTo}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
<div className="rowAlignLeft">
|
||||
{eventFrom}
|
||||
</div>
|
||||
<div className="rowAlignLeft">
|
||||
{eventTo}
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
</div>
|
||||
<div className="halfVerticalDivider" />
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent
|
||||
} from "../actions/livepeer";
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Text } from '@mantine/core';
|
||||
|
||||
const EventButtonAddress = (obj) => {
|
||||
const dispatch = useDispatch();
|
||||
@ -122,44 +123,48 @@ const EventButtonAddress = (obj) => {
|
||||
let thisName;
|
||||
let thisIcon;
|
||||
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) {
|
||||
thisIcon =
|
||||
<a className="selectOrch" style={{ marginRight: '0.2em', 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' }} />
|
||||
<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, padding: 0 }} />
|
||||
</a >
|
||||
}
|
||||
} else if (orchInfo && (orchInfo.name || orchInfo.image)) {
|
||||
if (orchInfo.name) {
|
||||
thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.name}</h4>;
|
||||
thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%' }} >{orchInfo.name}</Text>;
|
||||
} 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) {
|
||||
thisIcon =
|
||||
<a className="selectOrch" style={{ marginRight: '0.5em', 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 }} />
|
||||
<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 }} />
|
||||
</a >
|
||||
} else {
|
||||
thisIcon = null;
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="rowAlignLeft" style={{ width: '100%' }}>
|
||||
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>
|
||||
<div className="rowAlignLeft" style={{
|
||||
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 }} />
|
||||
</a>
|
||||
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
|
||||
<span className="elipsText">🔎</span>
|
||||
<button className="selectOrch" style={{ padding: '0.3em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
|
||||
<span style={{ margin: 0 }}>🔎</span>
|
||||
</button>
|
||||
<span>{obj.name}</span>
|
||||
{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
|
||||
if (livepeer.orchInfo) {
|
||||
for (const thisOrch of livepeer.orchInfo) {
|
||||
@ -175,8 +180,11 @@ const EventButtonAddress = (obj) => {
|
||||
}
|
||||
dispatch(getOrchestratorInfo(obj.address));
|
||||
}} >
|
||||
<span className="elipsText elipsOnMobileExtra">{thisName}</span>
|
||||
<div className="row">
|
||||
<span>{obj.name}</span> {thisName}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -453,15 +453,14 @@ const EventViewer = (obj) => {
|
||||
searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} />
|
||||
</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
|
||||
{filterBit}
|
||||
<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="content-wrapper" style={{ width: '100%' }}>
|
||||
<ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%' }}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab', padding: 0 }}>
|
||||
<ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%', overflowX: 'hidden' }}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab', padding: 0, width: '100%' }}>
|
||||
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
|
||||
<div className="verticalDivider" />
|
||||
{
|
||||
@ -471,9 +470,9 @@ const EventViewer = (obj) => {
|
||||
return (
|
||||
<div className="flexContainer forceWrap" style={{ marginLeft: '0.2em', marginRight: '0.2em', width: '100%' }} key={"ticket-" + idx}>
|
||||
<div className="rowAlignLeft">
|
||||
<div className="strokeSmollLeft showNeverOnMobile" style={{ marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }} >
|
||||
<h3>{idx}</h3>
|
||||
</div>
|
||||
{/* <div className="showNeverOnMobile" >
|
||||
<h3 style={{ width: '2em', marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }}>{idx + 1}</h3>
|
||||
</div> */}
|
||||
<div className="row">
|
||||
{delObj}
|
||||
</div>
|
||||
@ -533,7 +532,7 @@ const EventViewer = (obj) => {
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -13,7 +13,7 @@ const MonthlyStats = (obj) => {
|
||||
} else if (activePage == 2) {
|
||||
thisColour = "indigo";
|
||||
} else if (activePage == 3) {
|
||||
thisColour = "red";
|
||||
thisColour = "gray";
|
||||
}
|
||||
|
||||
return (
|
||||
@ -98,7 +98,7 @@ const MonthlyStats = (obj) => {
|
||||
data={[
|
||||
{ label: 'Info', value: '1' },
|
||||
{ label: 'Graph', value: '2' },
|
||||
{ label: 'Score', value: '3' }
|
||||
{ label: 'Fees', value: '3' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -28,120 +28,116 @@ const Stats = (obj) => {
|
||||
</div>
|
||||
</div>
|
||||
<div id='bodyContent'>
|
||||
<div className="mainContent">
|
||||
<div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
|
||||
<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="overflow-container">
|
||||
<div className="overflow-content" style={{ padding: 0 }}>
|
||||
<div className="flexContainer forceWrap" >
|
||||
<Accordion initialItem={0} className="stroke"
|
||||
style={{
|
||||
width: '100%', alignItems: 'stretch'
|
||||
}}
|
||||
styles={{
|
||||
item: {
|
||||
padding: 0, width: '100%', alignItems: 'stretch',
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
'&:hover': {
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
},
|
||||
'&': {
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
}
|
||||
},
|
||||
itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' },
|
||||
itemTitle: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: 0, width: '100%',
|
||||
},
|
||||
control: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: 0, margin: 0, height: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)',
|
||||
color: 'black',
|
||||
border: 'none',
|
||||
'&:hover': {
|
||||
color: 'black',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.9)',
|
||||
},
|
||||
'&': {
|
||||
color: 'black',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
border: 'none',
|
||||
}
|
||||
},
|
||||
label: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: '1em', width: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
|
||||
},
|
||||
icon: {
|
||||
padding: '0.2em', margin: '0.2em',
|
||||
},
|
||||
content: {
|
||||
padding: 0, alignItems: 'stretch', width: '100%', height: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.3)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
|
||||
},
|
||||
contentInner: { padding: 0, width: '100%', height: '100%' },
|
||||
}}>
|
||||
{
|
||||
livepeer.monthlyStats.slice(0).reverse().map(function (data, i) {
|
||||
let thisMonth = "";
|
||||
let monthAsNum = data.month;
|
||||
if (monthAsNum == 0) {
|
||||
thisMonth = "Januari";;
|
||||
} else if (monthAsNum == 1) {
|
||||
thisMonth = "Februari";;
|
||||
} else if (monthAsNum == 2) {
|
||||
thisMonth = "March";;
|
||||
} else if (monthAsNum == 3) {
|
||||
thisMonth = "April";
|
||||
} else if (monthAsNum == 4) {
|
||||
thisMonth = "May";
|
||||
} else if (monthAsNum == 5) {
|
||||
thisMonth = "June";
|
||||
} else if (monthAsNum == 6) {
|
||||
thisMonth = "July";
|
||||
} else if (monthAsNum == 7) {
|
||||
thisMonth = "August";
|
||||
} else if (monthAsNum == 8) {
|
||||
thisMonth = "September";
|
||||
} else if (monthAsNum == 9) {
|
||||
thisMonth = "October";
|
||||
} else if (monthAsNum == 10) {
|
||||
thisMonth = "November";
|
||||
} else if (monthAsNum == 11) {
|
||||
thisMonth = "December";;
|
||||
}
|
||||
|
||||
const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth";
|
||||
|
||||
return (
|
||||
<Accordion.Item
|
||||
label={title}
|
||||
icon={"🔄"}
|
||||
className="stroke"
|
||||
style={{ width: '100%', alignItems: 'stretch' }}
|
||||
key={"accord" + i + data.year + "-" + data.month + "-" + data.total}>
|
||||
<MonthlyStats
|
||||
data={data}
|
||||
seed={"win" + i + data.year + "-" + data.month + "-" + data.total}
|
||||
/>
|
||||
</Accordion.Item>
|
||||
)
|
||||
})
|
||||
<div className="row">
|
||||
<div className="stroke roundedOpaque onlyVerticalScroll" style={{ minWidth: '350px', width: '50vw', maxWidth: '1200px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
|
||||
<div className="content-wrapper" style={{ width: '100%' }}>
|
||||
<div className="overflow-container">
|
||||
<div className="overflow-content" style={{ padding: 0 }}>
|
||||
<div className="flexContainer forceWrap" >
|
||||
<Accordion initialItem={0} className="stroke"
|
||||
style={{
|
||||
width: '100%', alignItems: 'stretch'
|
||||
}}
|
||||
styles={{
|
||||
item: {
|
||||
padding: 0, width: '100%', alignItems: 'stretch',
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
'&:hover': {
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
},
|
||||
'&': {
|
||||
color: 'black',
|
||||
border: '1px solid rgba(56, 56, 56, 0.9)',
|
||||
}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' },
|
||||
itemTitle: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: 0, width: '100%',
|
||||
},
|
||||
control: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: 0, margin: 0, height: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)',
|
||||
color: 'black',
|
||||
border: 'none',
|
||||
'&:hover': {
|
||||
color: 'black',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.9)',
|
||||
},
|
||||
'&': {
|
||||
color: 'black',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
border: 'none',
|
||||
}
|
||||
},
|
||||
label: {
|
||||
color: 'rgba(218, 218, 218, 0.9)',
|
||||
padding: '1em', width: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.8)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
|
||||
},
|
||||
icon: {
|
||||
padding: '0.2em', margin: '0.2em',
|
||||
},
|
||||
content: {
|
||||
padding: 0, alignItems: 'stretch', width: '100%', height: '100%',
|
||||
backgroundColor: 'rgba(56, 56, 56, 0.3)',
|
||||
boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
|
||||
},
|
||||
contentInner: { padding: 0, width: '100%', height: '100%' },
|
||||
}}>
|
||||
{
|
||||
livepeer.monthlyStats.slice(0).reverse().map(function (data, i) {
|
||||
let thisMonth = "";
|
||||
let monthAsNum = data.month;
|
||||
if (monthAsNum == 0) {
|
||||
thisMonth = "Januari";;
|
||||
} else if (monthAsNum == 1) {
|
||||
thisMonth = "Februari";;
|
||||
} else if (monthAsNum == 2) {
|
||||
thisMonth = "March";;
|
||||
} else if (monthAsNum == 3) {
|
||||
thisMonth = "April";
|
||||
} else if (monthAsNum == 4) {
|
||||
thisMonth = "May";
|
||||
} else if (monthAsNum == 5) {
|
||||
thisMonth = "June";
|
||||
} else if (monthAsNum == 6) {
|
||||
thisMonth = "July";
|
||||
} else if (monthAsNum == 7) {
|
||||
thisMonth = "August";
|
||||
} else if (monthAsNum == 8) {
|
||||
thisMonth = "September";
|
||||
} else if (monthAsNum == 9) {
|
||||
thisMonth = "October";
|
||||
} else if (monthAsNum == 10) {
|
||||
thisMonth = "November";
|
||||
} else if (monthAsNum == 11) {
|
||||
thisMonth = "December";;
|
||||
}
|
||||
|
||||
const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth";
|
||||
|
||||
return (
|
||||
<Accordion.Item
|
||||
label={title}
|
||||
icon={"🔄"}
|
||||
className="stroke"
|
||||
style={{ width: '100%', alignItems: 'stretch' }}
|
||||
key={"accord" + i + data.year + "-" + data.month + "-" + data.total}>
|
||||
<MonthlyStats
|
||||
data={data}
|
||||
seed={"win" + i + data.year + "-" + data.month + "-" + data.total}
|
||||
/>
|
||||
</Accordion.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,7 +70,7 @@ p {
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@ -228,6 +228,42 @@ svg {
|
||||
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 {
|
||||
background-color: rgba(206, 206, 206, 0.26);
|
||||
-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;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selectOrch:hover, .selectOrch a:hover{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user