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

Fixed formatting

Browse Source
This commit is contained in:
Marco van Dijk 2022-04-23 22:16:07 +02:00
parent 86db25caee
commit fe439fed90
4 changed files with 52 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/OrchDelegatorViewer.js
View File

@ -36,45 +36,43 @@ const OrchDelegatorViewer = (obj) => {
const totalPages = (delegators.length + (itemsPerPage - (delegators.length % itemsPerPage))) / itemsPerPage; const totalPages = (delegators.length + (itemsPerPage - (delegators.length % itemsPerPage))) / itemsPerPage;
return ( return (
<div className="row"> <div className="strokeSmollLeft" style={{ paddingBottom: 0, marginBottom: 0 }}>
<div className="strokeSmollLeft fullMargin" style={{ paddingBottom: 0, marginBottom: 0 }}> <div className="row">
<div className="row"> <h3>{delegators.length} Current Delegators</h3>
<h3>{delegators.length} Current Delegators</h3> </div>
</div> <div className="content-wrapper">
<div className="content-wrapper"> <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
<ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}> <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
<div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}> {
{ sortedList.map((delObj, idx) => {
sortedList.map((delObj, idx) => { const tmp = idx - ((activePage - 1) * itemsPerPage);
const tmp = idx - ((activePage - 1) * itemsPerPage); if (tmp >= 0 && tmp < itemsPerPage) {
if (tmp >= 0 && tmp < itemsPerPage) { return (
return ( <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 + 1}</h3>
<h3>{idx + 1}</h3>
</div>
<div className="rowAlignLeft">
<Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
</div>
</div> </div>
<div className="rowAlignRight"> <div className="rowAlignLeft">
<p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p> <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
</div> </div>
</div> </div>
) <div className="rowAlignRight">
} <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
return null; </div>
}) </div>
} )
</div> }
</ScrollContainer> return null;
</div> })
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}> }
{totalPages > 1 ? </div>
<Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} /> </ScrollContainer>
: null} </div>
</div> <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
{totalPages > 1 ?
<Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
: null}
</div> </div>
</div> </div>
) )

25
src/components/OrchInfoViewer.js
View File

@ -2,6 +2,8 @@ import React from "react";
import Stat from "./statViewer"; import Stat from "./statViewer";
import Address from "./OrchAddressViewer"; import Address from "./OrchAddressViewer";
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Text } from "@mantine/core";
import ScrollContainer from "react-indiana-drag-scroll";
function updateClipboard(newClip) { function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then( navigator.clipboard.writeText(newClip).then(
@ -111,11 +113,7 @@ const OrchInfoViewer = (obj) => {
let ensUrl; let ensUrl;
if (hasENS) { if (hasENS) {
if (thisInfo.description) { if (thisInfo.description) {
ensDescription = ensDescription = thisInfo.description
<div className="stroke">
<div className="verticalDivider" />
<span>{thisInfo.description}</span>
</div>
} }
if (thisInfo.url) { if (thisInfo.url) {
if (!thisInfo.url.startsWith('http')) { if (!thisInfo.url.startsWith('http')) {
@ -132,11 +130,7 @@ const OrchInfoViewer = (obj) => {
} }
} else if (hasThreeBox) { } else if (hasThreeBox) {
if (thisInfo.description) { if (thisInfo.description) {
ensDescription = ensDescription = thisInfo.description
<div className="stroke">
<div className="verticalDivider" />
<span>{thisInfo.description}</span>
</div>
} }
if (thisInfo.website) { if (thisInfo.website) {
if (!thisInfo.website.startsWith('http')) { if (!thisInfo.website.startsWith('http')) {
@ -162,7 +156,16 @@ const OrchInfoViewer = (obj) => {
</div> </div>
<Address address={thisID} /> <Address address={thisID} />
{ensUrl} {ensUrl}
{ensDescription} <div className="verticalDivider" />
<div className="content-wrapper" style={{maxWidth: '350px', maxHeight: '300px', height: ' 100%' }}>
<ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ overflowX: 'hidden', justifyContent: 'center' }}>
<div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '200px', maxWidth: '300px' }}>
<p className="darkText" style={{ overflowWrap: 'break-word' }}>
{ensDescription}
</p>
</div>
</ScrollContainer>
</div>
<div className="stretchAndBetween" style={{ borderTop: '2px solid rgba(15,15,15,0.05)', marginTop: '0.2em' }} > <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>

4
src/components/orchestratorViewer.js
View File

@ -6,7 +6,7 @@ const Orchestrator = (obj) => {
if (obj.thisOrchestrator) { if (obj.thisOrchestrator) {
if (obj.forceVertical) { if (obj.forceVertical) {
return ( return (
<div className="hostInfo sideMargin mobileNoSideMargin"> <div className="hostInfo">
<div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}> <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
<OrchInfoViewer <OrchInfoViewer
rewardCut={obj.thisOrchestrator.rewardCut} rewardCut={obj.thisOrchestrator.rewardCut}
@ -22,7 +22,7 @@ const Orchestrator = (obj) => {
) )
} else { } else {
return ( return (
<div className="hostInfo sideMargin mobileNoSideMargin"> <div className="hostInfo">
<div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}> <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
<OrchInfoViewer <OrchInfoViewer
rewardCut={obj.thisOrchestrator.rewardCut} rewardCut={obj.thisOrchestrator.rewardCut}

30
src/pages/livepeer.js
View File

@ -5,7 +5,6 @@ import { useSelector, useDispatch } from 'react-redux';
import { getOrchestratorInfo, clearOrchestrator } from "../actions/livepeer"; import { getOrchestratorInfo, clearOrchestrator } from "../actions/livepeer";
import EventViewer from "../components/eventViewer"; import EventViewer from "../components/eventViewer";
import Orchestrator from "../components/orchestratorViewer"; import Orchestrator from "../components/orchestratorViewer";
import ContractPrices from '../components/ContractPrices';
import { Dialog, ScrollArea, Stack } from '@mantine/core'; import { Dialog, ScrollArea, Stack } from '@mantine/core';
import ScrollContainer from 'react-indiana-drag-scroll'; import ScrollContainer from 'react-indiana-drag-scroll';
@ -46,24 +45,6 @@ const Livepeer = (obj) => {
headerString = "Livepeer Orchestrator Explorer"; headerString = "Livepeer Orchestrator Explorer";
} }
let sidebar;
if (showSidebar && false) {
sidebar = <div id='sideContent'>
<div className="verticalDivider" />
<div className="strokeSmollLeft sideMargin">
<div className="row">
<div className="row">
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div>
</div>
<div className="verticalDivider" />
<div className="row">
<ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
</div>
</div>
</div >
}
return ( return (
<div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}> <div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}>
@ -116,19 +97,12 @@ const Livepeer = (obj) => {
<ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%', overflowX: 'hidden' }}> <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="overflow-content" style={{ cursor: 'grab', padding: 0, width: '100%' }}>
<div className="verticalDivider" /> <div className="verticalDivider" />
<div className="strokeSmollLeft sideMargin"> <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
<div className="row"> <div className="verticalDivider" />
<div className="row">
<Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
</div>
</div>
<div className="verticalDivider" />
</div>
</div> </div>
</ScrollContainer> </ScrollContainer>
</div> </div>
</Dialog> </Dialog>
{sidebar}
<div className="mainContent"> <div className="mainContent">
<EventViewer searchTerm={searchTerm} setSearchTerm={setSearchTerm} <EventViewer searchTerm={searchTerm} setSearchTerm={setSearchTerm}
forceVertical={true} setShowFilter={setShowFilter} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter} forceVertical={true} setShowFilter={setShowFilter} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter}