Tooltip toegevoegd aand orch viewer

meer grafana dashboards

package.json

@@ -18,6 +18,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "react-scripts": "3.2.0",
+    "react-tooltip": "^4.2.21",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "styled-components": "^5.3.3"

src/OrchAddressViewer.js

@@ -0,0 +1,30 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+
+const Address = (obj) => {
+  return (
+    <div className="rowAlignLeft" style={{ width: 'unset' }}>
+      <a href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
+        <div className="rowAlignLeft" style={{ width: 'unset' }}>
+          <img alt="" src="livepeer.png" width="20" height="20" />
+          {obj.address}
+        </div>
+      </a>
+      <ReactTooltip id={obj.seed} place="top" effect="solid">
+        {"https://explorer.livepeer.org/accounts/" + obj.address}
+      </ReactTooltip>
+    </div>
+  )
+}
+
+export default Address;
+
+{/* <div className="rowAlignLeft" style={{ width: 'unset' }}>
+  <a href={obj.eventObj.transactionUrl}>
+    <img alt="" src="arb.svg" width="30" height="30" />
+  </a>
+  <a href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
+    <img alt="" src="livepeer.png" width="30" height="30" />
+  </a>
+  {eventCaller}
+</div> */}

src/grafana.js

@@ -60,8 +60,12 @@ const Grafana = (obj) => {
                 </div>
               </div>
               <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-                <div className="row" style={{ paddingLeft: "1em", paddingRight: "1em" }}>
+              <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} />
+                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572109" height="200" frameBorder="0"></iframe>
+                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572110" height="200" frameBorder="0"></iframe>
+                </div>
+                <div className="flexContainer" style={{ justifyContent: "center" }}>
+                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572108" height="200" frameBorder="0"></iframe>
                 </div>
                 <div className="flexContainer" style={{ justifyContent: "center" }}>
                   <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>

src/livepeer.js

@@ -135,7 +135,7 @@ const Livepeer = (obj) => {
         }}>
           <img alt="" src="livepeer.png" width="100em" height="100em" />
         </button>
-        <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '1em' }}>
+        <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '0.2em' }}>
           <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} />
         </div>
         <div className="stroke metaSidebar" style={{ padding: 0, flex: 1 }}>

src/orchestratorViewer.js

@@ -1,6 +1,8 @@
 import React from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
 import Stat from "./statViewer";
+import ReactTooltip from "react-tooltip";
+import Address from "./OrchAddressViewer";
 
 function updateClipboard(newClip) {
   navigator.clipboard.writeText(newClip).then(
@@ -76,7 +78,7 @@ const Orchestrator = (obj) => {
           <div style={{ flexDirection: 'row', display: "flex" }} style={{ marginTop: '1em' }}>
             <a href={thisUrl}>
               <h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
-              {thisID}
+              <Address address={thisID} />
             </a>
           </div>
           <Stat header={"Earned Fees"} content={totalVolumeETH + " Eth ($" + totalVolumeUSD + ")"} />
@@ -84,11 +86,16 @@ const Orchestrator = (obj) => {
           <Stat header={"Fee Cut"} content={feeCut + "%"} />
           <Stat header={"Total Stake"} content={totalStake + " LPT"} />
           <Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
-          <button className="homeButton" onClick={() => {
+          <div className="strokeSmollLeft" style={{ display: "flex" }}>
+            <button className="homeButton" data-tip data-for="registerTip" onClick={() => {
               copyLink(shareUrl);
             }}>
               <img alt="" src="clipboard.svg" width="20em" height="20em" />
             </button>
+            <ReactTooltip id="registerTip" place="top" effect="solid">
+              Copy to clipboard
+            </ReactTooltip>
+          </div>
         </div>
         <div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
           <div className="row" style={{ marginTop: '1em' }}>
@@ -101,8 +108,7 @@ const Orchestrator = (obj) => {
                   delegators.map((delObj, idx) => {
                     return (
                       <div className="rowAlignLeft" key={"delegator" + idx} style={{ marginLeft: '1em', borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
-                        <a href={"https://explorer.livepeer.org/accounts/" + delObj.id}>
+                        <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
-                          <img alt="" src="livepeer.png" width="30" height="30" />{delObj.id.substr(0, 12) + "..."}</a>
                         <div className="strokeSmollLeft">
                           <p>{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>