stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-04 18:25:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Now with scrollable event viewer

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-02 13:59:02 +01:00
parent fdc22d1d48
commit d462bdfdb8
5 changed files with 68 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ log.txt
build/
TODO
backend/src/config.js
notes.txt

12
src/eventButton.js
View File

@ -33,14 +33,10 @@ const EventButton = (obj) => {
}
return (
<div className="row">
<a href={obj.transactionUrl}>
<button className="waveButton">
<img alt="" src="livepeer.png" width="30" height="30" />
{eventSpecificInfo}
</button>
</a>
</div>
<a href={obj.transactionUrl} className="row">
<img alt="" src="livepeer.png" width="30" height="30" />
{eventSpecificInfo}
</a>
)
}

3
src/eventViewer.js
View File

@ -1,9 +1,10 @@
import React from "react";
import EventButton from "./eventButton";
import ScrollContainer from 'react-indiana-drag-scroll';
const EventViewer = (obj) => {
return (
<div className="roundedOpaque flexContainer hostinfo scrollWindow" style={{ width: 'unset', justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginBottom: '20px', marginTop: '20px', flexDirection: 'column' }}>
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '200px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
{obj.events.map((eventObj, idx) => {
console.log(eventObj);
// TODO: make something that groups shit as long as the eventObj.transactionUrl is the same

130
src/livepeer.js
View File

@ -120,85 +120,65 @@ class Livepeer extends React.Component {
}
return (
<div className="rowContainer">
<div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px rgba(8, 7, 56, 0.692)" }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<button className="homeButton" onClick={() => {
this.setState({ redirectToHome: true });
}}>
<img alt="" src="livepeer.png" width="100em" height="100em" />
</button>
<div style={{ width: '100%', height: '100%' }}>
<div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px rgba(8, 7, 56, 0.692)", position: 'absolute', top: '0px', left: '0px', height: '200px', right: '0px', overflow: 'hidden' }}>
<div className="row" style={{ margin: 0, padding: 0 }}>
<button className="homeButton" onClick={() => {
this.setState({ redirectToHome: true });
}}>
<img alt="" src="livepeer.png" width="100em" height="100em" />
</button>
</div>
<div className="row metaSidebar" style={{ padding: 0 }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row">
<h3>Price Info</h3>
</div>
<div className="row">
<img alt="" src="livepeer.png" width="30" height="30" />
<p>${lptPrice}</p>
<p>({lptPriceChange24h}%)</p>
</div>
<div className="row">
<img alt="" src="eth.png" width="30" height="30" />
<p>${ethPrice}</p>
<p>({ethPriceChange24h}%)</p>
</div>
</div>
</div >
<div className="stroke" style={{ padding: 0 }}>
<div className="main-container">
<div className="content-wrapper">
<ScrollContainer className="overflow-container" hideScrollbars={false}>
<div className="overflow-content metaSidebar" style={{ cursor: 'grab' }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="row">
<h3>Price Info</h3>
</div>
<div className="row">
<img alt="" src="livepeer.png" width="30" height="30" />
<p>${lptPrice}</p>
<p>({lptPriceChange24h}%)</p>
</div>
<div className="row">
<img alt="" src="eth.png" width="30" height="30" />
<p>${ethPrice}</p>
<p>({ethPriceChange24h}%)</p>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<h3>Smart contract prices L2</h3>
<div className="row">
<p>Reward Call:</p>
<p>${redeemRewardCostL2USD}</p>
</div>
<div className="row">
<p>Claim Ticket:</p>
<p>${claimTicketCostL2USD}</p>
</div>
<div className="row">
<p>Withdraw Fees:</p>
<p>${withdrawFeeCostL2USD}</p>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<h3>Smart contract prices L1</h3>
<div className="row">
<p>Reward Call:</p>
<p>${redeemRewardCostL1USD}</p>
</div>
<div className="row">
<p>Claim Ticket:</p>
<p>${claimTicketCostL1USD}</p>
</div>
<div className="row">
<p>Withdraw Fees:</p>
<p>${withdrawFeeCostL1USD}</p>
</div>
</div>
</div>
</ScrollContainer>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<h3>Smart contract prices L2</h3>
<div className="row">
<p>Reward Call:</p>
<p>${redeemRewardCostL2USD}</p>
</div>
<div className="row">
<p>Claim Ticket:</p>
<p>${claimTicketCostL2USD}</p>
</div>
<div className="row">
<p>Withdraw Fees:</p>
<p>${withdrawFeeCostL2USD}</p>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<h3>Smart contract prices L1</h3>
<div className="row">
<p>Reward Call:</p>
<p>${redeemRewardCostL1USD}</p>
</div>
<div className="row">
<p>Claim Ticket:</p>
<p>${claimTicketCostL1USD}</p>
</div>
<div className="row">
<p>Withdraw Fees:</p>
<p>${withdrawFeeCostL1USD}</p>
</div>
</div>
</div>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
</div>
<div className="stroke" style={{ margin: 0, padding: 0 }}>
<EventViewer events={eventsList} />
</div >
<div className="stroke" style={{ padding: 0 }}>
</div>
</div>
</div>
</div >
<EventViewer events={eventsList} />
</div >
);
}
}

7
src/style.css
View File

@ -80,7 +80,7 @@ p {
#dvdlogo {
display: block;
position: absolute;
z-index: 1;
z-index: -1;
-webkit-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
-moz-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
-o-animation: moveX 10s linear 0s infinite alternate, moveY 17s linear 0s infinite alternate, changeColour 30s, linear, 0s, infinite, normal, none, infinite;
@ -145,6 +145,11 @@ svg {
flex-direction: row;
}
.rowContainer {
height: 100%;
display: block;
}
.serviceButton {
width: 100%;
margin: 0.4em;