Move side bar to top

added a subcomponent for the event renderer (WIP)

.gitignore

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

src/eventViewer.js

@@ -0,0 +1,23 @@
+import React from "react";
+import EventButton from "./eventButton";
+
+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' }}>
+      {obj.events.map((eventObj, idx) => {
+        console.log(eventObj);
+        // TODO: make something that groups shit as long as the eventObj.transactionUrl is the same
+        return <EventButton
+          key={eventObj.transactionUrl + idx}
+          transactionUrl={eventObj.transactionUrl}
+          transactionHash={eventObj.transactionHash}
+          name={eventObj.name}
+          data={eventObj.data}
+          address={eventObj.address}
+        />
+      })}
+    </div>
+  )
+}
+
+export default EventViewer;

src/livepeer.js

@@ -8,7 +8,7 @@ import { connect } from "react-redux";
 import {
   getQuotes, getBlockchainData, getEvents
 } from "./actions/livepeer";
-import EventButton from "./eventButton";
+import EventViewer from "./eventViewer";
 
 const mapStateToProps = (state) => {
   return {
@@ -120,81 +120,82 @@ class Livepeer extends React.Component {
     }
 
     return (
-      <div className="flexContainer">
+      <div className="rowContainer">
-        <div className="stroke" style={{ margin: 0, padding: 0 }}>
+        <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>
+          </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>
+            </div>
+          </div>
         </div>
         <div className="stroke" style={{ margin: 0, padding: 0 }}>
-          <div className="row" style={{ margin: 0, padding: 0 }}>
+          <div className="stroke" 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="roundedOpaque flexContainer hostinfo scrollWindow" style={{ width: 'unset', justifyContent: 'center', alignContent: 'center', alignItems: 'center', marginBottom: '20px', marginTop: '20px', flexDirection: 'column' }}>
+          <div className="stroke" style={{ margin: 0, padding: 0 }}>
-            {eventsList.map((eventObj, idx) => {
+            <EventViewer events={eventsList} />
-              console.log(eventObj);
+          </div >
-              // TODO: make something that groups shit as long as the eventObj.transactionUrl is the same
+          <div className="stroke" style={{ padding: 0 }}>
-              return <EventButton
+
-                key={eventObj.transactionUrl + idx}
-                transactionUrl={eventObj.transactionUrl}
-                transactionHash={eventObj.transactionHash}
-                name={eventObj.name}
-                data={eventObj.data}
-                address={eventObj.address}
-              />
-            })}
-          </div>
-        </div >
-        <div className="stroke" style={{ padding: 0 }}>
-          <div className="separator showOnlyOnMobile" />
-          <div className="main-container">
-            <div className="content-wrapper">
-              <ScrollContainer className="overflow-container" hideScrollbars={false}>
-                <div className="overflow-content metaSidebar" style={{ cursor: 'grab' }}>
-                  <div className="row">
-                    <h3>Price Info</h3>
-                  </div>
-                  <div className="row">
-                    <img alt="" src="livepeer.png" width="30" height="30" />
-                    <p style={{ flex: 1 }}>${lptPrice}</p>
-                    <p style={{ flex: 1 }}>({lptPriceChange24h}%)</p>
-                  </div>
-                  <div className="row">
-                    <img alt="" src="eth.png" width="30" height="30" />
-                    <p style={{ flex: 1 }}>${ethPrice}</p>
-                    <p style={{ flex: 1 }}>({ethPriceChange24h}%)</p>
-                  </div>
-                  <h3>Smart contract prices L2</h3>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Reward Call:</p>
-                    <p style={{ flex: 1 }}>${redeemRewardCostL2USD}</p>
-                  </div>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Claim Ticket:</p>
-                    <p style={{ flex: 1 }}>${claimTicketCostL2USD}</p>
-                  </div>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Withdraw Fees:</p>
-                    <p style={{ flex: 1 }}>${withdrawFeeCostL2USD}</p>
-                  </div>
-                  <h3>Smart contract prices L1</h3>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Reward Call:</p>
-                    <p style={{ flex: 1 }}>${redeemRewardCostL1USD}</p>
-                  </div>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Claim Ticket:</p>
-                    <p style={{ flex: 1 }}>${claimTicketCostL1USD}</p>
-                  </div>
-                  <div className="row">
-                    <p style={{ flex: 1 }}>Withdraw Fees:</p>
-                    <p style={{ flex: 1 }}>${withdrawFeeCostL1USD}</p>
-                  </div>
-                </div>
-              </ScrollContainer>
-            </div>
           </div>
         </div>
       </div>

src/style.css

@@ -50,6 +50,7 @@ p {
   text-shadow: 0.5px 0.5px 0.8px #948dff;
   color: #1a1b26;
   font-size: 1.2em;
+  margin: 0.3em;
 }
 
 /* width */
@@ -136,15 +137,12 @@ svg {
   align-items: center;
   align-content: center;
   opacity: 0.95;
+  flex-direction: column;
 }
 
 .metaSidebar {
-  background-color: rgba(180, 175, 252, 0.80);
+  display: flex;
-  box-shadow: 9px 13px 18px 8px  rgba(8, 7, 56, 0.692);
+  flex-direction: row;
-  border-radius: 30px;
-  box-sizing: border-box;
-  backdrop-filter: blur(6px);
-  height: 100%;
 }
 
 .serviceButton {
@@ -216,7 +214,6 @@ svg {
 
 .stroke {
   box-sizing: border-box;
-  height: 100%;
   padding-bottom: 20px;
   padding-top: 20px;
   margin: 10px;
@@ -334,7 +331,6 @@ svg {
 }
 
 .main-container {
-  height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
 }
@@ -535,13 +531,6 @@ svg {
     border-radius: 10px;
     box-sizing: border-box;
   }
-  .metaSidebar {
-    background-color: none;
-    width: 100%;
-    box-shadow: none;
-    border-radius: 10px;
-    box-sizing: border-box;
-  }
   .stroke {
     margin-left: 0;
     margin-right: 0;