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

Even prettier buttons

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-13 16:12:49 +01:00
parent 58935bfb70
commit 9ca11de924
3 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/actions/livepeer.js
View File

@ -119,8 +119,8 @@ export const getEvents = () => async dispatch => {
eventTo = ""; eventTo = "";
if (eventContainsBond) { if (eventContainsBond) {
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3> <h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
</div> </div>
@ -130,7 +130,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT stake {tmpAmount.toFixed(2)} LPT stake
</p> </p>
@ -141,8 +142,8 @@ export const getEvents = () => async dispatch => {
</div> </div>
} else { } else {
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🚀</h3> <h3 style={{ margin: 0, padding: 0 }}>🚀</h3>
</div> </div>
@ -152,7 +153,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
round {tmpWhen} round {tmpWhen}
</p> </p>
@ -165,8 +167,8 @@ export const getEvents = () => async dispatch => {
eventType = "Unbond"; eventType = "Unbond";
eventColour = unbondColour; eventColour = unbondColour;
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>❌</h3> <h3 style={{ margin: 0, padding: 0 }}>❌</h3>
</div> </div>
@ -176,7 +178,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT {tmpAmount.toFixed(2)} LPT
</p> </p>
@ -196,8 +199,8 @@ export const getEvents = () => async dispatch => {
eventType = "Stake"; eventType = "Stake";
eventColour = stakeColour; eventColour = stakeColour;
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3> <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div> </div>
@ -207,7 +210,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT {tmpAmount.toFixed(2)} LPT
</p> </p>
@ -219,8 +223,8 @@ export const getEvents = () => async dispatch => {
if (eventType === "Stake" && eventDescription === "") { if (eventType === "Stake" && eventDescription === "") {
if (eventFrom === "0x0000000000000000000000000000000000000000") { if (eventFrom === "0x0000000000000000000000000000000000000000") {
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3> <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div> </div>
@ -230,7 +234,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT {tmpAmount.toFixed(2)} LPT
</p> </p>
@ -239,8 +244,8 @@ export const getEvents = () => async dispatch => {
} else if (eventFrom === eventTo) { } else if (eventFrom === eventTo) {
eventFrom = ""; eventFrom = "";
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3> <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div> </div>
@ -250,7 +255,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT {tmpAmount.toFixed(2)} LPT
</p> </p>
@ -258,8 +264,8 @@ export const getEvents = () => async dispatch => {
</div> </div>
} else { } else {
eventDescription = eventDescription =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>⌛</h3> <h3 style={{ margin: 0, padding: 0 }}>⌛</h3>
</div> </div>
@ -269,7 +275,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{tmpAmount.toFixed(2)} LPT {tmpAmount.toFixed(2)} LPT
</p> </p>
@ -326,18 +333,19 @@ export const getEvents = () => async dispatch => {
continue; continue;
} }
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🏦</h3> <h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
</div> </div>
<div className="row"> <div className="row">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
withdrew staking rewards withdrew stake
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{amount.toFixed(2)} LPT {amount.toFixed(2)} LPT
</p> </p>
@ -365,8 +373,8 @@ export const getEvents = () => async dispatch => {
continue; continue;
} }
const txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🏦</h3> <h3 style={{ margin: 0, padding: 0 }}>🏦</h3>
</div> </div>
@ -376,13 +384,11 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{amount.toFixed(4)} Eth {amount.toFixed(4)} Eth
</p> </p>
<p style={{ fontSize: 'small' }}>
round {eventObj.data.withdrawRound}
</p>
</div> </div>
</div> </div>
finalEventList.push({ finalEventList.push({
@ -405,8 +411,8 @@ export const getEvents = () => async dispatch => {
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 txt = const txt =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🔄</h3> <h3 style={{ margin: 0, padding: 0 }}>🔄</h3>
</div> </div>
@ -416,7 +422,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
{amount1.toFixed(2)}% on staking rewards {amount1.toFixed(2)}% on staking rewards
</p> </p>
@ -448,8 +455,8 @@ export const getEvents = () => async dispatch => {
continue; continue;
} }
let txt = let txt =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>💰</h3> <h3 style={{ margin: 0, padding: 0 }}>💰</h3>
</div> </div>
@ -459,7 +466,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
+{amount1.toFixed(2)} LPT rewards +{amount1.toFixed(2)} LPT rewards
</p> </p>
@ -487,8 +495,8 @@ export const getEvents = () => async dispatch => {
eventContainsReward = true; eventContainsReward = true;
const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000; const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
let txt = let txt =
<div className="flexContainer" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>💸</h3> <h3 style={{ margin: 0, padding: 0 }}>💸</h3>
</div> </div>
@ -498,7 +506,8 @@ export const getEvents = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="strokeSmollLeft"> <div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
+{amount1.toFixed(2)} LPT +{amount1.toFixed(2)} LPT
</p> </p>
@ -603,8 +612,8 @@ export const getTickets = () => async dispatch => {
if (eventObj.name === "WinningTicketRedeemed") { if (eventObj.name === "WinningTicketRedeemed") {
const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000; const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000;
const txt = const txt =
<div className="row" style={{ justifyContent: 'space-between' }}> <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
<div className="strokeSmollLeft"> <div className="strokeSmoll">
<div className="row"> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>🎟️</h3> <h3 style={{ margin: 0, padding: 0 }}>🎟️</h3>
</div> </div>
@ -614,10 +623,13 @@ export const getTickets = () => async dispatch => {
</p> </p>
</div> </div>
</div> </div>
<div className="verticalSeparator"></div>
<div className="flexContainer">
<p style={{ fontSize: 'small' }}> <p style={{ fontSize: 'small' }}>
+{amount.toFixed(4)} Eth +{amount.toFixed(4)} Eth
</p> </p>
</div> </div>
</div>
finalTicketList.push({ finalTicketList.push({
eventType: "RedeemTicket", eventType: "RedeemTicket",
eventDescription: txt, eventDescription: txt,

2
src/components/eventButton.js
View File

@ -85,7 +85,7 @@ const EventButton = (obj) => {
{eventCaller} {eventCaller}
</div> </div>
<div className="row"> <div className="row">
<div className="row" style={{ 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" 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)" }}>
{obj.eventObj.eventDescription} {obj.eventObj.eventDescription}
</div> </div>
</div> </div>

9
src/style.css
View File

@ -216,6 +216,15 @@ svg {
border-radius: 1em; border-radius: 1em;
} }
.verticalSeparator {
width: 0.2em;
border-left: dashed 2px rgba(122, 128, 127, 0.4);
margin-left: 0.5em;
margin-right: 0.5em;
display: flex;
align-items: stretch;
}
.flexContainer { .flexContainer {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;