mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 02:35:09 +02:00
Added share function to orch profiles
Rewrote some class components to functional components Batch multiple redux events on load and in the livepeer explorer component added inset when button is active
This commit is contained in:
parent
361a89e313
commit
a55d422ded
187
public/clipboard.svg
Normal file
187
public/clipboard.svg
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500pt"
|
||||||
|
height="500pt"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 500 500"
|
||||||
|
id="svg317"
|
||||||
|
sodipodi:docname="clipboard.svg"
|
||||||
|
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview319"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#ffffff"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:pageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="1"
|
||||||
|
inkscape:document-units="pt"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:zoom="0.88714286"
|
||||||
|
inkscape:cx="235.02415"
|
||||||
|
inkscape:cy="279.54911"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1040"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g315" />
|
||||||
|
<defs
|
||||||
|
id="defs241">
|
||||||
|
<symbol
|
||||||
|
id="t"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 18.766,-1.125 c -0.96875,0.5 -1.9805,0.875 -3.0312,1.125 -1.043,0.25781 -2.1367,0.39062 -3.2812,0.39062 -3.3984,0 -6.0898,-0.94531 -8.0781,-2.8438 -1.9922,-1.9062 -2.9844,-4.4844 -2.9844,-7.7344 0,-3.2578 0.99219,-5.8359 2.9844,-7.7344 1.9883,-1.9062 4.6797,-2.8594 8.0781,-2.8594 1.1445,0 2.2383,0.13281 3.2812,0.39062 1.0508,0.25 2.0625,0.625 3.0312,1.125 v 4.2188 c -0.98047,-0.65625 -1.9453,-1.1406 -2.8906,-1.4531 -0.94922,-0.3125 -1.9492,-0.46875 -3,-0.46875 -1.875,0 -3.3516,0.60547 -4.4219,1.8125 -1.0742,1.1992 -1.6094,2.8555 -1.6094,4.9688 0,2.1055 0.53516,3.7617 1.6094,4.9688 1.0703,1.1992 2.5469,1.7969 4.4219,1.7969 1.0508,0 2.0508,-0.14844 3,-0.45312 0.94531,-0.3125 1.9102,-0.80078 2.8906,-1.4688 z"
|
||||||
|
id="path181" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="c"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 13.734,-11.141 c -0.4375,-0.19531 -0.87109,-0.34375 -1.2969,-0.4375 -0.41797,-0.10156 -0.83984,-0.15625 -1.2656,-0.15625 -1.2617,0 -2.2305,0.40625 -2.9062,1.2188 -0.67969,0.80469 -1.0156,1.9531 -1.0156,3.4531 v 7.0625 H 2.3591 v -15.312 h 4.8906 v 2.5156 c 0.625,-1 1.3438,-1.7266 2.1562,-2.1875 0.82031,-0.46875 1.8008,-0.70312 2.9375,-0.70312 0.16406,0 0.34375,0.01172 0.53125,0.03125 0.19531,0.01172 0.47656,0.03906 0.84375,0.07813 z"
|
||||||
|
id="path184" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="b"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 17.641,-7.7031 v 1.4062 H 6.188 c 0.125,1.1484 0.53906,2.0078 1.25,2.5781 0.70703,0.57422 1.7031,0.85938 2.9844,0.85938 1.0312,0 2.082,-0.14844 3.1562,-0.45312 1.082,-0.3125 2.1914,-0.77344 3.3281,-1.3906 v 3.7656 c -1.1562,0.4375 -2.3125,0.76562 -3.4688,0.98438 -1.1562,0.22656 -2.3125,0.34375 -3.4688,0.34375 -2.7734,0 -4.9297,-0.70312 -6.4688,-2.1094 -1.5312,-1.4062 -2.2969,-3.3789 -2.2969,-5.9219 0,-2.5 0.75391,-4.4609 2.2656,-5.8906 1.5078,-1.4375 3.582,-2.1562 6.2188,-2.1562 2.4062,0 4.332,0.73047 5.7812,2.1875 1.4453,1.4492 2.1719,3.3828 2.1719,5.7969 z m -5.0312,-1.625 c 0,-0.92578 -0.27344,-1.6719 -0.8125,-2.2344 -0.54297,-0.57031 -1.25,-0.85938 -2.125,-0.85938 -0.94922,0 -1.7188,0.26562 -2.3125,0.79688 -0.5937,0.53126 -0.96484,1.2969 -1.1094,2.2969 z"
|
||||||
|
id="path187" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="a"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 9.2188,-6.8906 c -1.0234,0 -1.793,0.17188 -2.3125,0.51562 -0.51172,0.34375 -0.76562,0.85547 -0.76562,1.5312 0,0.625 0.20703,1.1172 0.625,1.4688 0.41406,0.34375 0.98828,0.51562 1.7188,0.51562 0.92578,0 1.7031,-0.32812 2.3281,-0.98438 0.63281,-0.66406 0.95312,-1.4922 0.95312,-2.4844 v -0.5625 z m 7.4688,-1.8438 V 0 h -4.9219 v -2.2656 c -0.65625,0.92969 -1.3984,1.6055 -2.2188,2.0312 -0.82422,0.41406 -1.8242,0.625 -3,0.625 -1.5859,0 -2.8711,-0.45703 -3.8594,-1.375 -0.99219,-0.92578 -1.4844,-2.1289 -1.4844,-3.6094 0,-1.7891 0.61328,-3.1016 1.8438,-3.9375 1.2383,-0.84375 3.1797,-1.2656 5.8281,-1.2656 h 2.8906 v -0.39062 c 0,-0.76953 -0.30859,-1.332 -0.92188,-1.6875 -0.61719,-0.36328 -1.5703,-0.54688 -2.8594,-0.54688 -1.0547,0 -2.0312,0.10547 -2.9375,0.3125 -0.89844,0.21094 -1.7305,0.52344 -2.5,0.9375 v -3.7344 c 1.0391,-0.25 2.0859,-0.44141 3.1406,-0.57812 1.0625,-0.13281 2.125,-0.20312 3.1875,-0.20312 2.7578,0 4.75,0.54688 5.9688,1.6406 1.2266,1.0859 1.8438,2.8555 1.8438,5.3125 z"
|
||||||
|
id="path190" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="d"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 7.7031,-19.656 v 4.3438 H 12.75 v 3.5 H 7.7031 v 6.5 c 0,0.71094 0.14062,1.1875 0.42188,1.4375 0.28126,0.25 0.83594,0.375 1.6719,0.375 h 2.5156 v 3.5 h -4.1875 c -1.9375,0 -3.3125,-0.39844 -4.125,-1.2031 -0.80469,-0.8125 -1.2031,-2.1797 -1.2031,-4.1094 v -6.5 h -2.4219 v -3.5 h 2.4219 v -4.3438 z"
|
||||||
|
id="path193" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="j"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 12.766,-13.078 v -8.2031 h 4.9219 V -1e-4 H 12.766 v -2.2188 c -0.66797,0.90625 -1.4062,1.5703 -2.2188,1.9844 -0.8126,0.4141 -1.7578,0.625 -2.8281,0.625 -1.8867,0 -3.4336,-0.75 -4.6406,-2.25 -1.2109,-1.5 -1.8125,-3.4258 -1.8125,-5.7812 0,-2.3633 0.60156,-4.2969 1.8125,-5.7969 1.207,-1.5 2.7539,-2.25 4.6406,-2.25 1.0625,0 2,0.21484 2.8125,0.64062 0.82031,0.42969 1.5664,1.0859 2.2344,1.9688 z m -3.2188,9.9219 c 1.0391,0 1.8359,-0.37891 2.3906,-1.1406 0.55078,-0.76953 0.82812,-1.8828 0.82812,-3.3438 0,-1.457 -0.27734,-2.5664 -0.82812,-3.3281 -0.55469,-0.76953 -1.3516,-1.1562 -2.3906,-1.1562 -1.043,0 -1.8398,0.38672 -2.3906,1.1562 -0.55469,0.76172 -0.82812,1.8711 -0.82812,3.3281 0,1.4609 0.27344,2.5742 0.82812,3.3438 0.55078,0.76172 1.3477,1.1406 2.3906,1.1406 z"
|
||||||
|
id="path196" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="i"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 10.5,-3.1562 c 1.0508,0 1.8516,-0.37891 2.4062,-1.1406 0.55078,-0.76953 0.82812,-1.8828 0.82812,-3.3438 0,-1.457 -0.27734,-2.5664 -0.82812,-3.3281 -0.55469,-0.76953 -1.3555,-1.1562 -2.4062,-1.1562 -1.0547,0 -1.8594,0.38672 -2.4219,1.1562 -0.55469,0.77344 -0.82812,1.8828 -0.82812,3.3281 0,1.4492 0.27344,2.5586 0.82812,3.3281 0.5625,0.77344 1.3672,1.1562 2.4219,1.1562 z m -3.25,-9.9219 c 0.67578,-0.88281 1.4219,-1.5391 2.2344,-1.9688 0.82031,-0.42578 1.7656,-0.64062 2.8281,-0.64062 1.8945,0 3.4453,0.75 4.6562,2.25 1.207,1.5 1.8125,3.4336 1.8125,5.7969 0,2.3555 -0.60547,4.2812 -1.8125,5.7812 -1.2109,1.5 -2.7617,2.25 -4.6562,2.25 -1.0625,0 -2.0078,-0.21094 -2.8281,-0.625 C 8.6719,-0.6602 7.9258,-1.32032 7.25,-2.21882 V -2e-5 H 2.3594 v -21.281 H 7.25 Z"
|
||||||
|
id="path199" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="h"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 0.34375,-15.312 h 4.8906 l 4.125,10.391 3.5,-10.391 h 4.8906 l -6.4375,16.766 c -0.64844,1.6953 -1.4023,2.8828 -2.2656,3.5625 -0.86719,0.6875 -2,1.0312 -3.4062,1.0312 H 2.79685 V 2.8289 h 1.5312 c 0.83203,0 1.4375,-0.13672 1.8125,-0.40625 C 6.52336,2.16093 6.82024,1.69218 7.03117,1.01645 L 7.17179,0.59457 Z"
|
||||||
|
id="path202" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="f"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="M 2.3594,-15.312 H 7.25 v 15.031 c 0,2.0508 -0.49609,3.6172 -1.4844,4.7031 -0.98047,1.082 -2.4062,1.625 -4.2812,1.625 H -0.9375 V 2.8283 h 0.85938 c 0.92578,0 1.5625,-0.21094 1.9062,-0.625 0.35156,-0.41797 0.53125,-1.2461 0.53125,-2.4844 z m 0,-5.9688 H 7.25 v 4 H 2.3594 Z"
|
||||||
|
id="path205" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="g"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 2.1875,-5.9688 v -9.3438 h 4.9219 v 1.5312 c 0,0.83594 -0.00781,1.875 -0.015625,3.125 -0.011719,1.25 -0.015625,2.0859 -0.015625,2.5 0,1.2422 0.03125,2.1328 0.09375,2.6719 0.070313,0.54297 0.17969,0.93359 0.32812,1.1719 0.20703,0.32422 0.47266,0.57422 0.79688,0.75 0.32031,0.16797 0.69141,0.25 1.1094,0.25 1.0195,0 1.8203,-0.39062 2.4062,-1.1719 0.58203,-0.78125 0.875,-1.8672 0.875,-3.2656 v -7.5625 h 4.8906 V -6e-4 H 12.6875 V -2.2194 C 11.94531,-1.32096 11.1641,-0.6608 10.3437,-0.235 9.51948,0.17906 8.6093,0.39 7.6093,0.39 5.8476,0.39 4.5038,-0.14906 3.5781,-1.235 2.64841,-2.317 2.1875,-3.8952 2.1875,-5.9694 Z"
|
||||||
|
id="path208" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="s"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 1.5938,-15.312 h 13.359 v 3.4219 l -8.0625,8.3906 h 8.0625 v 3.5 H 1.2648 V -3.4214 L 9.3273,-11.812 H 1.5929 Z"
|
||||||
|
id="path211" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="r"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="M 2.3594,-21.281 H 7.25 v 11.594 l 5.625,-5.625 h 5.6875 L 11.0937,-8.2808 19.1562,4e-4 H 13.2187 L 7.2499,-6.3902 V 4e-4 H 2.3593 Z"
|
||||||
|
id="path214" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="q"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 12.422,-21.281 v 3.2188 H 9.7189 c -0.6875,0 -1.1719,0.125 -1.4531,0.375 -0.27344,0.25 -0.40625,0.6875 -0.40625,1.3125 v 1.0625 h 4.1875 v 3.5 H 7.85955 V -2e-4 h -4.8906 v -11.812 h -2.4375 v -3.5 h 2.4375 v -1.0625 c 0,-1.6641 0.46094,-2.8984 1.3906,-3.7031 0.92578,-0.80078 2.3672,-1.2031 4.3281,-1.2031 z"
|
||||||
|
id="path217" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="e"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 9.6406,-12.188 c -1.0859,0 -1.9141,0.39062 -2.4844,1.1719 -0.57422,0.78125 -0.85938,1.9062 -0.85938,3.375 0,1.4688 0.28516,2.5938 0.85938,3.375 0.57031,0.77344 1.3984,1.1562 2.4844,1.1562 1.0625,0 1.875,-0.38281 2.4375,-1.1562 0.57031,-0.78125 0.85938,-1.9062 0.85938,-3.375 0,-1.4688 -0.28906,-2.5938 -0.85938,-3.375 -0.5625,-0.78125 -1.375,-1.1719 -2.4375,-1.1719 z m 0,-3.5 c 2.6328,0 4.6914,0.71484 6.1719,2.1406 1.4766,1.418 2.2188,3.3867 2.2188,5.9062 0,2.5117 -0.74219,4.4805 -2.2188,5.9062 C 14.332,-0.317 12.2734,0.39 9.6406,0.39 6.9922,0.39 4.9258,-0.31703 3.4375,-1.735 1.9453,-3.1608 1.2031,-5.1295 1.2031,-7.6412 c 0,-2.5195 0.74219,-4.4883 2.2344,-5.9062 1.4883,-1.4258 3.5547,-2.1406 6.2031,-2.1406 z"
|
||||||
|
id="path220" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="p"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 16.547,-12.766 c 0.61328,-0.94531 1.3477,-1.6719 2.2031,-2.1719 0.85156,-0.5 1.7891,-0.75 2.8125,-0.75 1.7578,0 3.0977,0.54688 4.0156,1.6406 0.92578,1.0859 1.3906,2.6562 1.3906,4.7188 V -4e-4 h -4.9219 v -7.9844 -0.35938 c 0.0078,-0.13281 0.01563,-0.32031 0.01563,-0.5625 0,-1.082 -0.16406,-1.8633 -0.48438,-2.3438 -0.3125,-0.48828 -0.82422,-0.73438 -1.5312,-0.73438 -0.92969,0 -1.6484,0.38672 -2.1562,1.1562 -0.51172,0.76172 -0.77344,1.8672 -0.78125,3.3125 v 7.5156 h -4.9219 v -7.9844 c 0,-1.6953 -0.14844,-2.7852 -0.4375,-3.2656 -0.29297,-0.48828 -0.8125,-0.73438 -1.5625,-0.73438 -0.9375,0 -1.6641,0.38672 -2.1719,1.1562 -0.51172,0.76172 -0.76562,1.8594 -0.76562,3.2969 v 7.5312 h -4.9219 v -15.312 h 4.9219 v 2.2344 c 0.60156,-0.86328 1.2891,-1.5156 2.0625,-1.9531 0.78125,-0.4375 1.6406,-0.65625 2.5781,-0.65625 1.0625,0 2,0.25781 2.8125,0.76562 0.8125,0.51172 1.4258,1.2305 1.8438,2.1562 z"
|
||||||
|
id="path223" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="o"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="M 17.75,-9.3281 V 0 h -4.9219 v -7.1094 c 0,-1.3438 -0.03125,-2.2656 -0.09375,-2.7656 -0.0625,-0.5 -0.16797,-0.86719 -0.3125,-1.1094 -0.1875,-0.3125 -0.44922,-0.55469 -0.78125,-0.73438 -0.32422,-0.17578 -0.69531,-0.26562 -1.1094,-0.26562 -1.0234,0 -1.8242,0.39844 -2.4062,1.1875 -0.58594,0.78125 -0.875,1.8711 -0.875,3.2656 V -1e-4 H 2.3594 v -21.281 H 7.25 v 8.2031 c 0.73828,-0.88281 1.5195,-1.5391 2.3438,-1.9688 0.83203,-0.42578 1.75,-0.64062 2.75,-0.64062 1.7695,0 3.1133,0.54688 4.0312,1.6406 0.91406,1.0859 1.375,2.6562 1.375,4.7188 z"
|
||||||
|
id="path226" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="n"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 2.5781,-20.406 h 5.875 l 7.4219,14 v -14 h 4.9844 V 0 h -5.875 L 7.5625,-14 V 0 H 2.5781 Z"
|
||||||
|
id="path229" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="m"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="M 17.75,-9.3281 V 0 h -4.9219 v -7.1406 c 0,-1.3203 -0.03125,-2.2344 -0.09375,-2.7344 -0.0625,-0.5 -0.16797,-0.86719 -0.3125,-1.1094 -0.1875,-0.3125 -0.44922,-0.55469 -0.78125,-0.73438 -0.32422,-0.17578 -0.69531,-0.26562 -1.1094,-0.26562 -1.0234,0 -1.8242,0.39844 -2.4062,1.1875 -0.58594,0.78125 -0.875,1.8711 -0.875,3.2656 V -1e-4 H 2.3594 v -15.312 H 7.25 v 2.2344 c 0.73828,-0.88281 1.5195,-1.5391 2.3438,-1.9688 0.83203,-0.42578 1.75,-0.64062 2.75,-0.64062 1.7695,0 3.1133,0.54688 4.0312,1.6406 0.91406,1.0859 1.375,2.6562 1.375,4.7188 z"
|
||||||
|
id="path232" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="l"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 2.5781,-20.406 h 8.7344 c 2.5938,0 4.582,0.57812 5.9688,1.7344 1.3945,1.1484 2.0938,2.7891 2.0938,4.9219 0,2.1367 -0.69922,3.7812 -2.0938,4.9375 -1.3867,1.1562 -3.375,1.7344 -5.9688,1.7344 H 7.8281 V 3e-4 h -5.25 z m 5.25,3.8125 v 5.7031 H 10.75 c 1.0195,0 1.8047,-0.25 2.3594,-0.75 0.5625,-0.5 0.84375,-1.2031 0.84375,-2.1094 0,-0.91406 -0.28125,-1.6172 -0.84375,-2.1094 -0.55469,-0.48828 -1.3398,-0.73438 -2.3594,-0.73438 z"
|
||||||
|
id="path235" />
|
||||||
|
</symbol>
|
||||||
|
<symbol
|
||||||
|
id="k"
|
||||||
|
overflow="visible">
|
||||||
|
<path
|
||||||
|
d="m 14.719,-14.828 v 3.9844 c -0.65625,-0.45703 -1.3242,-0.79688 -2,-1.0156 -0.66797,-0.21875 -1.3594,-0.32812 -2.0781,-0.32812 -1.3672,0 -2.4336,0.40234 -3.2031,1.2031 -0.76172,0.79297 -1.1406,1.9062 -1.1406,3.3438 0,1.4297 0.37891,2.543 1.1406,3.3438 0.76953,0.79297 1.8359,1.1875 3.2031,1.1875 0.75781,0 1.4844,-0.10938 2.1719,-0.32812 0.6875,-0.22656 1.3203,-0.56641 1.9062,-1.0156 v 4 c -0.76172,0.28125 -1.5391,0.48828 -2.3281,0.625 -0.78125,0.14453 -1.5742,0.21875 -2.375,0.21875 -2.7617,0 -4.9219,-0.70703 -6.4844,-2.125 -1.5547,-1.4141 -2.3281,-3.3828 -2.3281,-5.9062 0,-2.5312 0.77344,-4.5039 2.3281,-5.9219 1.5625,-1.4141 3.7227,-2.125 6.4844,-2.125 0.80078,0 1.5938,0.07422 2.375,0.21875 0.78125,0.13672 1.5547,0.35156 2.3281,0.64062 z"
|
||||||
|
id="path238" />
|
||||||
|
</symbol>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g315"
|
||||||
|
transform="translate(-170.802,-39.202294)">
|
||||||
|
<path
|
||||||
|
d="m 320.48084,48.723777 c -6.4961,-0.07422 -11.238,5.7188 -11.199,11.199 v 11.199 h -22.398 c -24.625,0 -44.801,20.176 -44.801,44.801003 v 369.6 c 0,24.625 20.176,44.801 44.801,44.801 h 268.8 c 24.625,0 44.801,-20.176 44.801,-44.801 v -369.6 c 0,-24.625003 -20.176,-44.801003 -44.801,-44.801003 h -22.398 v -11.199 c 0,-5.8633 -5.3359,-11.199 -11.199,-11.199 z m 11.199,22.398 h 179.2 v 33.602003 h -46.199 c -4.9219,-0.004 -9.6172,3.6328 -10.852,8.3984 -3.7109,14.496 -16.688,25.199 -32.551,25.199 -15.863,0 -28.836,-10.707 -32.551,-25.199 -1.2305,-4.7656 -5.9258,-8.4023 -10.852,-8.3984 h -46.199 V 71.121777 Z m -44.801,22.398 h 22.398 v 22.398003 c 0,5.8633 5.3359,11.199 11.199,11.199 h 50.227 c 8.7578,19.551 27.863,33.602 50.574,33.602 22.711,0 41.816,-14.051 50.574,-33.602 h 50.227 c 5.8633,0 11.199,-5.3359 11.199,-11.199 V 93.519777 h 22.398 c 12.602,0 22.398,9.796903 22.398,22.398003 v 369.6 c 0,12.602 -9.7969,22.398 -22.398,22.398 h -268.8 c -12.602,0 -22.398,-9.7969 -22.398,-22.398 v -369.6 c 0,-12.602 9.7969,-22.398003 22.398,-22.398003 z m 190.4,134.400003 c -18.426,0 -33.602,15.176 -33.602,33.602 0,1.6602 0.11719,3.3008 0.34766,4.8984 l -56.176,37.625 c -5.9883,-5.4922 -13.891,-8.9258 -22.57,-8.9258 -18.426,0 -33.602,15.176 -33.602,33.602 0,18.426 15.176,33.602 33.602,33.602 8.5898,0 16.43,-3.3594 22.398,-8.75 l 56.352,37.625 c -0.21875,1.543 -0.34766,3.1289 -0.34766,4.7266 0,18.426 15.176,33.602 33.602,33.602 18.426,0 33.602,-15.176 33.602,-33.602 0,-18.426 -15.176,-33.602 -33.602,-33.602 -8.6797,0 -16.582,3.4336 -22.574,8.9258 l -56.176,-37.625 c 0.23438,-1.5977 0.34766,-3.2383 0.34766,-4.8984 0,-1.5977 -0.12891,-3.1836 -0.34766,-4.7266 l 56.352,-37.625 c 5.9688,5.3906 13.809,8.75 22.398,8.75 18.426,0 33.602,-15.176 33.602,-33.602 0,-18.426 -15.176,-33.602 -33.602,-33.602 z m 0,22.398 c 6.3164,0 11.199,4.8828 11.199,11.199 0,6.3203 -4.8828,11.199 -11.199,11.199 -6.3203,0 -11.199,-4.8828 -11.199,-11.199 0,-6.3203 4.8828,-11.199 11.199,-11.199 z m -112,67.199 c 6.3164,0 11.199,4.8828 11.199,11.199 0,6.3203 -4.8828,11.199 -11.199,11.199 -6.3203,0 -11.199,-4.8828 -11.199,-11.199 0,-6.3203 4.8828,-11.199 11.199,-11.199 z m 112,67.199 c 6.3164,0 11.199,4.8828 11.199,11.199 0,6.3203 -4.8828,11.199 -11.199,11.199 -6.3203,0 -11.199,-4.8828 -11.199,-11.199 0,-6.3203 4.8828,-11.199 11.199,-11.199 z"
|
||||||
|
id="path243" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
@ -11,7 +11,6 @@ import {
|
|||||||
} from "react-router-dom";
|
} from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<Startup>
|
<Startup>
|
||||||
|
|||||||
@ -1,4 +1,8 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import {
|
||||||
|
getOrchestratorInfo
|
||||||
|
} from "./actions/livepeer";
|
||||||
|
import { useDispatch } from 'react-redux'
|
||||||
|
|
||||||
const activationColour = "rgba(23, 60, 122, 0.3)";
|
const activationColour = "rgba(23, 60, 122, 0.3)";
|
||||||
const rewardColour = "rgba(20, 99, 29, 0.3)";
|
const rewardColour = "rgba(20, 99, 29, 0.3)";
|
||||||
@ -7,6 +11,7 @@ const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
|
|||||||
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
||||||
|
|
||||||
const EventButton = (obj) => {
|
const EventButton = (obj) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
// Data shared among all events in this transaction
|
// Data shared among all events in this transaction
|
||||||
const thisURL = obj.transactionUrl;
|
const thisURL = obj.transactionUrl;
|
||||||
//const thisTransaction = obj.transactionHash;
|
//const thisTransaction = obj.transactionHash;
|
||||||
@ -81,8 +86,8 @@ const EventButton = (obj) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Check name filter on transactionCaller, transactionFrom, transactionTo
|
// Check name filter on transactionCaller, transactionFrom, transactionTo
|
||||||
if (obj.searchTerm){
|
if (obj.searchTerm) {
|
||||||
if (obj.searchTerm !== ""){
|
if (obj.searchTerm !== "") {
|
||||||
let isFiltered = true;
|
let isFiltered = true;
|
||||||
if (transactionCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
if (transactionCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
||||||
if (transactionFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
if (transactionFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
|
||||||
@ -93,40 +98,40 @@ const EventButton = (obj) => {
|
|||||||
let isFiltered = true;
|
let isFiltered = true;
|
||||||
// Check boolean filters on transactionName
|
// Check boolean filters on transactionName
|
||||||
let count = 0;
|
let count = 0;
|
||||||
if(obj.filterActivated){
|
if (obj.filterActivated) {
|
||||||
if (transactionName === "Activated"){
|
if (transactionName === "Activated") {
|
||||||
isFiltered = false;
|
isFiltered = false;
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
if(obj.rewardActivated){
|
if (obj.rewardActivated) {
|
||||||
if (transactionName === "Reward"){
|
if (transactionName === "Reward") {
|
||||||
isFiltered = false;
|
isFiltered = false;
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
if(obj.updateActivated){
|
if (obj.updateActivated) {
|
||||||
if (transactionName === "Update"){
|
if (transactionName === "Update") {
|
||||||
isFiltered = false;
|
isFiltered = false;
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
if(obj.withdrawActivated){
|
if (obj.withdrawActivated) {
|
||||||
if (transactionName === "Withdraw"){
|
if (transactionName === "Withdraw") {
|
||||||
isFiltered = false;
|
isFiltered = false;
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
if(obj.stakeActivated){
|
if (obj.stakeActivated) {
|
||||||
if (transactionName === "Stake"){
|
if (transactionName === "Stake") {
|
||||||
isFiltered = false;
|
isFiltered = false;
|
||||||
}
|
}
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
if (isFiltered && count){
|
if (isFiltered && count) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let eventSpecificInfo;
|
let eventSpecificInfo;
|
||||||
if (transactionName === "Reward") {
|
if (transactionName === "Reward") {
|
||||||
if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
|
if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
|
||||||
@ -150,15 +155,15 @@ const EventButton = (obj) => {
|
|||||||
eventSpecificInfo =
|
eventSpecificInfo =
|
||||||
<div className="rowAlignLeft">
|
<div className="rowAlignLeft">
|
||||||
<p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to </p>
|
<p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to </p>
|
||||||
<button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionTo) }} >{transactionTo}</button>
|
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>
|
||||||
</div>
|
</div>
|
||||||
} else {
|
} else {
|
||||||
eventSpecificInfo =
|
eventSpecificInfo =
|
||||||
<div className="rowAlignLeft">
|
<div className="rowAlignLeft">
|
||||||
<p> moved {(transactionAmount / 1000000000000000000).toFixed(2)} LPT stake: </p>
|
<p> moved {(transactionAmount / 1000000000000000000).toFixed(2)} LPT stake: </p>
|
||||||
<button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionFrom) }} >{transactionFrom}</button>
|
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>
|
||||||
<p> to </p>
|
<p> to </p>
|
||||||
<button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionTo) }} >{transactionTo}</button>
|
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
} else if (transactionName === "Withdraw") {
|
} else if (transactionName === "Withdraw") {
|
||||||
@ -196,7 +201,7 @@ const EventButton = (obj) => {
|
|||||||
<img alt="" src="livepeer.png" width="30" height="30" />
|
<img alt="" src="livepeer.png" width="30" height="30" />
|
||||||
</a>
|
</a>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionCaller) }} >{transactionCaller}</button>
|
<button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionCaller)) }} >{transactionCaller}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{eventSpecificInfo}
|
{eventSpecificInfo}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useState } from "react";
|
||||||
import EventButton from "./eventButton";
|
import EventButton from "./eventButton";
|
||||||
import ScrollContainer from 'react-indiana-drag-scroll';
|
import ScrollContainer from 'react-indiana-drag-scroll';
|
||||||
|
|
||||||
@ -9,7 +9,7 @@ const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
|
|||||||
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
const stakeColour = "rgba(71, 23, 122, 0.3)";
|
||||||
|
|
||||||
const EventViewer = (obj) => {
|
const EventViewer = (obj) => {
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState(obj.prefill || "");
|
||||||
const [filterActivated, setFilterActivated] = useState(false);
|
const [filterActivated, setFilterActivated] = useState(false);
|
||||||
const [rewardActivated, setRewardActivated] = useState(false);
|
const [rewardActivated, setRewardActivated] = useState(false);
|
||||||
const [updateActivated, setUpdateActivated] = useState(false);
|
const [updateActivated, setUpdateActivated] = useState(false);
|
||||||
@ -28,23 +28,22 @@ const EventViewer = (obj) => {
|
|||||||
let finalIdx = 0;
|
let finalIdx = 0;
|
||||||
return (
|
return (
|
||||||
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
|
<div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
|
||||||
<div className="fixed-container">
|
<div className="fixed-container" style={{ padding: 0, width: '300px'}}>
|
||||||
<div className="rowAlignLeft">
|
<input className="searchField" style={{ width: '300px' }}
|
||||||
<input className="searchField"
|
value={searchTerm}
|
||||||
value={searchTerm}
|
onChange={(evt) => setSearchTerm(evt.target.value)}
|
||||||
onChange={(evt) => setSearchTerm(evt.target.value)}
|
placeholder='Filter by Orchestrator address'
|
||||||
placeholder='Filter by Orchestrator address'
|
type="text"
|
||||||
type="text"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="content-wrapper" style={{alignItems: 'stretch', width: '100%'}}>
|
<div className="content-wrapper" style={{ alignItems: 'stretch', width: '100%' }}>
|
||||||
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
||||||
<div className="overflow-content" style={{ cursor: 'grab' }}>
|
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
|
||||||
{obj.events.slice(0).reverse().map((eventObj, idx) => {
|
{obj.events.slice(0).reverse().map((eventObj, idx) => {
|
||||||
// Filter
|
// Filter
|
||||||
if (eventObj.name === "WithdrawFees" || eventObj.name === "TransferBond"
|
if (eventObj.name === "WithdrawFees" || eventObj.name === "TransferBond"
|
||||||
|| eventObj.name === "Rebond" || eventObj.name === "Unbond" || eventObj.name === "EarningsClaimed") {
|
|| eventObj.name === "Rebond" || eventObj.name === "Unbond" || eventObj.name === "EarningsClaimed") {
|
||||||
|
console.log("Skipping event" + eventObj);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// New transaction found
|
// New transaction found
|
||||||
@ -73,7 +72,6 @@ const EventViewer = (obj) => {
|
|||||||
transactionHash={finalHash}
|
transactionHash={finalHash}
|
||||||
events={eventBundle}
|
events={eventBundle}
|
||||||
idx={finalIdx}
|
idx={finalIdx}
|
||||||
setOrchFunction={obj.setOrchFunction}
|
|
||||||
searchTerm={searchTerm}
|
searchTerm={searchTerm}
|
||||||
filterActivated={filterActivated}
|
filterActivated={filterActivated}
|
||||||
rewardActivated={rewardActivated}
|
rewardActivated={rewardActivated}
|
||||||
@ -85,28 +83,28 @@ const EventViewer = (obj) => {
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</ScrollContainer>
|
</ScrollContainer>
|
||||||
<div className="strokeSmollLeft" style={{marginRight: "1em"}}>
|
<div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
|
||||||
<button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
|
<button className={filterActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
|
||||||
setFilterActivated(!filterActivated);
|
setFilterActivated(!filterActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Activated</h3>
|
<h3>Activated</h3>
|
||||||
</button>
|
</button>
|
||||||
<button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
|
<button className={rewardActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
|
||||||
setRewardActivated(!rewardActivated);
|
setRewardActivated(!rewardActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Reward</h3>
|
<h3>Reward</h3>
|
||||||
</button>
|
</button>
|
||||||
<button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
|
<button className={updateActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
|
||||||
setUpdateActivated(!updateActivated);
|
setUpdateActivated(!updateActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Update</h3>
|
<h3>Update</h3>
|
||||||
</button>
|
</button>
|
||||||
<button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
|
<button className={withdrawActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
|
||||||
setWithdrawActivated(!withdrawActivated);
|
setWithdrawActivated(!withdrawActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Withdraw</h3>
|
<h3>Withdraw</h3>
|
||||||
</button>
|
</button>
|
||||||
<button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
|
<button className={stakeActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
|
||||||
setStakeActivated(!stakeActivated);
|
setStakeActivated(!stakeActivated);
|
||||||
}}>
|
}}>
|
||||||
<h3>Stake</h3>
|
<h3>Stake</h3>
|
||||||
|
|||||||
167
src/grafana.js
167
src/grafana.js
@ -1,120 +1,93 @@
|
|||||||
import * as React from "react";
|
import React, { useState } from 'react'
|
||||||
import './style.css';
|
import './style.css';
|
||||||
import {
|
import {
|
||||||
Navigate
|
Navigate
|
||||||
} from "react-router-dom";
|
} from "react-router-dom";
|
||||||
import { connect } from "react-redux";
|
import { useSelector } from 'react-redux'
|
||||||
import {
|
|
||||||
getQuotes, getCurrentOrchestratorInfo
|
|
||||||
} from "./actions/livepeer";
|
|
||||||
import Orchestrator from "./orchestratorViewer";
|
import Orchestrator from "./orchestratorViewer";
|
||||||
|
|
||||||
const mapStateToProps = (state) => {
|
const Grafana = (obj) => {
|
||||||
return {
|
const livepeer = useSelector((state) => state.livepeerstate);
|
||||||
session: state.session,
|
const [redirectToHome, setRedirectToHome] = useState(false);
|
||||||
userstate: state.userstate,
|
|
||||||
errors: state.errors,
|
|
||||||
livepeer: state.livepeerstate
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
if (redirectToHome) {
|
||||||
getQuotes: () => dispatch(getQuotes()),
|
return <Navigate push to="/" />;
|
||||||
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
|
|
||||||
});
|
|
||||||
|
|
||||||
class Grafana extends React.Component {
|
|
||||||
state = {
|
|
||||||
redirectToHome: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
let lptPrice = 0;
|
||||||
if (this.state.redirectToHome) {
|
let ethPrice = 0;
|
||||||
return <Navigate push to="/" />;
|
let lptPriceChange24h = 0;
|
||||||
|
let ethPriceChange24h = 0;
|
||||||
|
if (livepeer.quotes) {
|
||||||
|
if (livepeer.quotes.LPT) {
|
||||||
|
lptPrice = livepeer.quotes.LPT.price.toFixed(2);
|
||||||
|
lptPriceChange24h = livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
||||||
}
|
}
|
||||||
|
if (livepeer.quotes.ETH) {
|
||||||
let lptPrice = 0;
|
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
|
||||||
let ethPrice = 0;
|
ethPriceChange24h = livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
||||||
let lptPriceChange24h = 0;
|
|
||||||
let ethPriceChange24h = 0;
|
|
||||||
if (this.props.livepeer.quotes) {
|
|
||||||
if (this.props.livepeer.quotes.LPT) {
|
|
||||||
lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
|
|
||||||
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
|
||||||
}
|
|
||||||
if (this.props.livepeer.quotes.ETH) {
|
|
||||||
ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
|
|
||||||
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
||||||
|
<div className="row" style={{ margin: 0, padding: 0 }}>
|
||||||
|
<button className="homeButton" onClick={() => {
|
||||||
|
setRedirectToHome(true);
|
||||||
|
}}>
|
||||||
|
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
||||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
<div className="flexContainer">
|
||||||
<button className="homeButton" onClick={() => {
|
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
|
||||||
this.setState({ redirectToHome: true });
|
<div className="stroke roundedOpaque" style={{}}>
|
||||||
}}>
|
<div className="row">
|
||||||
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
|
||||||
<div className="flexContainer">
|
|
||||||
<div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
|
|
||||||
<div className="stroke roundedOpaque" style={{}}>
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="row">
|
<img alt="" src="livepeer.png" width="30" height="30" />
|
||||||
<img alt="" src="livepeer.png" width="30" height="30" />
|
<p>${lptPrice}</p>
|
||||||
<p>${lptPrice}</p>
|
<p>({lptPriceChange24h}%)</p>
|
||||||
<p>({lptPriceChange24h}%)</p>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<h2> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
|
|
||||||
</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 roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
|
<div className="row">
|
||||||
<div className="row" style={{paddingLeft: "1em", paddingRight: "1em"}}>
|
<h2> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
|
||||||
<Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
|
</div>
|
||||||
</div>
|
<div className="row">
|
||||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
<img alt="" src="eth.png" width="30" height="30" />
|
||||||
<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>
|
<p>${ethPrice}</p>
|
||||||
</div>
|
<p>({ethPriceChange24h}%)</p>
|
||||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
</div>
|
||||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
|
</div>
|
||||||
</div>
|
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
|
||||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
<div className="row" style={{ paddingLeft: "1em", paddingRight: "1em" }}>
|
||||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
|
<Orchestrator thisOrchestrator={livepeer.thisOrchestrator} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||||
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||||
<a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
|
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
|
||||||
<button className="waveButton">
|
</div>
|
||||||
<img alt="" src="grafana.png" width="30" height="30" />
|
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||||
<p>Full Statistics</p>
|
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
|
||||||
</button>
|
</div>
|
||||||
</a>
|
<div className="flexContainer" style={{ justifyContent: "center" }}>
|
||||||
</div>
|
<iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
|
||||||
|
<button className="waveButton">
|
||||||
|
<img alt="" src="grafana.png" width="30" height="30" />
|
||||||
|
<p>Full Statistics</p>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
export default Grafana;
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(Grafana);
|
|
||||||
|
|||||||
320
src/livepeer.js
320
src/livepeer.js
@ -1,9 +1,9 @@
|
|||||||
import * as React from "react";
|
import React, { useState, useEffect } from 'react'
|
||||||
import './style.css';
|
import './style.css';
|
||||||
import {
|
import {
|
||||||
Navigate
|
Navigate, useSearchParams
|
||||||
} from "react-router-dom";
|
} from "react-router-dom";
|
||||||
import { connect } from "react-redux";
|
import { useSelector, useDispatch, batch } from 'react-redux'
|
||||||
import {
|
import {
|
||||||
getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getOrchestratorInfo
|
getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getOrchestratorInfo
|
||||||
} from "./actions/livepeer";
|
} from "./actions/livepeer";
|
||||||
@ -11,190 +11,166 @@ import EventViewer from "./eventViewer";
|
|||||||
import Orchestrator from "./orchestratorViewer";
|
import Orchestrator from "./orchestratorViewer";
|
||||||
import Stat from "./statViewer";
|
import Stat from "./statViewer";
|
||||||
|
|
||||||
const mapStateToProps = (state) => {
|
// Refresh every 30 seconds
|
||||||
return {
|
const refreshInterval = 30000;
|
||||||
session: state.session,
|
|
||||||
userstate: state.userstate,
|
|
||||||
errors: state.errors,
|
|
||||||
livepeer: state.livepeerstate
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const Livepeer = (obj) => {
|
||||||
getQuotes: () => dispatch(getQuotes()),
|
const [prefill, setPrefill] = useSearchParams();
|
||||||
getBlockchainData: () => dispatch(getBlockchainData()),
|
const dispatch = useDispatch();
|
||||||
getEvents: () => dispatch(getEvents()),
|
const livepeer = useSelector((state) => state.livepeerstate);
|
||||||
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo()),
|
const [redirectToHome, setRedirectToHome] = useState(false);
|
||||||
getOrchestratorInfo: (addr) => dispatch(getOrchestratorInfo(addr))
|
|
||||||
});
|
|
||||||
|
|
||||||
class Livepeer extends React.Component {
|
const refreshAllZeData = () => {
|
||||||
state = {
|
batch(() => {
|
||||||
redirectToHome: false,
|
dispatch(getQuotes())
|
||||||
};
|
dispatch(getEvents())
|
||||||
|
dispatch(getBlockchainData())
|
||||||
constructor(props) {
|
dispatch(getCurrentOrchestratorInfo())
|
||||||
super(props);
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
useEffect(() => {
|
||||||
this.props.getQuotes();
|
if (prefill.get('orchAddr') != ""){
|
||||||
this.props.getBlockchainData();
|
dispatch(getOrchestratorInfo(prefill.get('orchAddr')));
|
||||||
this.props.getEvents();
|
}
|
||||||
this.props.getCurrentOrchestratorInfo();
|
if (refreshInterval) {
|
||||||
|
const interval = setInterval(refreshAllZeData, refreshInterval);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, [refreshInterval]);
|
||||||
|
|
||||||
|
if (redirectToHome) {
|
||||||
|
return <Navigate push to="/" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
let ethPrice = 0;
|
||||||
if (this.state.redirectToHome) {
|
if (livepeer.quotes) {
|
||||||
return <Navigate push to="/" />;
|
if (livepeer.quotes.ETH) {
|
||||||
|
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let lptPrice = 0;
|
let l1GasFeeInGwei = 0;
|
||||||
let ethPrice = 0;
|
let l2GasFeeInGwei = 0;
|
||||||
let lptPriceChange24h = 0;
|
let redeemRewardCostL1 = 0;
|
||||||
let ethPriceChange24h = 0;
|
let redeemRewardCostL2 = 0;
|
||||||
if (this.props.livepeer.quotes) {
|
let claimTicketCostL1 = 0;
|
||||||
if (this.props.livepeer.quotes.LPT) {
|
let claimTicketCostL2 = 0;
|
||||||
lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
|
let withdrawFeeCostL1 = 0;
|
||||||
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
let withdrawFeeCostL2 = 0;
|
||||||
}
|
let stakeFeeCostL1 = 0;
|
||||||
if (this.props.livepeer.quotes.ETH) {
|
let stakeFeeCostL2 = 0;
|
||||||
ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
|
let commissionFeeCostL1 = 0;
|
||||||
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
let commissionFeeCostL2 = 0;
|
||||||
}
|
let serviceUriFeeCostL1 = 0;
|
||||||
}
|
let serviceUriFeeCostL2 = 0;
|
||||||
|
if (livepeer.blockchains) {
|
||||||
|
l1GasFeeInGwei = livepeer.blockchains.l1GasFeeInGwei;
|
||||||
|
l2GasFeeInGwei = livepeer.blockchains.l2GasFeeInGwei;
|
||||||
|
redeemRewardCostL1 = livepeer.blockchains.redeemRewardCostL1;
|
||||||
|
redeemRewardCostL2 = livepeer.blockchains.redeemRewardCostL2;
|
||||||
|
claimTicketCostL1 = livepeer.blockchains.claimTicketCostL1;
|
||||||
|
claimTicketCostL2 = livepeer.blockchains.claimTicketCostL2;
|
||||||
|
withdrawFeeCostL1 = livepeer.blockchains.withdrawFeeCostL1;
|
||||||
|
withdrawFeeCostL2 = livepeer.blockchains.withdrawFeeCostL2;
|
||||||
|
stakeFeeCostL1 = livepeer.blockchains.stakeFeeCostL1;
|
||||||
|
stakeFeeCostL2 = livepeer.blockchains.stakeFeeCostL2;
|
||||||
|
commissionFeeCostL1 = livepeer.blockchains.commissionFeeCostL1;
|
||||||
|
commissionFeeCostL2 = livepeer.blockchains.commissionFeeCostL2;
|
||||||
|
serviceUriFeeCostL1 = livepeer.blockchains.serviceUriFeeCostL1;
|
||||||
|
serviceUriFeeCostL2 = livepeer.blockchains.serviceUriFeeCostL2;
|
||||||
|
}
|
||||||
|
|
||||||
let blockchainTime = 0;
|
let redeemRewardCostL1USD = 0;
|
||||||
let l1Block = 0;
|
let redeemRewardCostL2USD = 0;
|
||||||
let l2Block = 0;
|
let claimTicketCostL1USD = 0;
|
||||||
let l1GasFeeInGwei = 0;
|
let claimTicketCostL2USD = 0;
|
||||||
let l2GasFeeInGwei = 0;
|
let withdrawFeeCostL1USD = 0;
|
||||||
let redeemRewardCostL1 = 0;
|
let withdrawFeeCostL2USD = 0;
|
||||||
let redeemRewardCostL2 = 0;
|
let stakeFeeCostL1USD = 0;
|
||||||
let claimTicketCostL1 = 0;
|
let stakeFeeCostL2USD = 0;
|
||||||
let claimTicketCostL2 = 0;
|
let commissionFeeCostL1USD = 0;
|
||||||
let withdrawFeeCostL1 = 0;
|
let commissionFeeCostL2USD = 0;
|
||||||
let withdrawFeeCostL2 = 0;
|
let serviceUriFeeCostL1USD = 0;
|
||||||
let stakeFeeCostL1 = 0;
|
let serviceUriFeeCostL2USD = 0;
|
||||||
let stakeFeeCostL2 = 0;
|
if (l1GasFeeInGwei && ethPrice) {
|
||||||
let commissionFeeCostL1 = 0;
|
if (redeemRewardCostL1) {
|
||||||
let commissionFeeCostL2 = 0;
|
redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
|
||||||
let serviceUriFeeCostL1 = 0;
|
|
||||||
let serviceUriFeeCostL2 = 0;
|
|
||||||
if (this.props.livepeer.blockchains) {
|
|
||||||
blockchainTime = this.props.livepeer.blockchains.timestamp;
|
|
||||||
l1GasFeeInGwei = this.props.livepeer.blockchains.l1GasFeeInGwei;
|
|
||||||
l2GasFeeInGwei = this.props.livepeer.blockchains.l2GasFeeInGwei;
|
|
||||||
redeemRewardCostL1 = this.props.livepeer.blockchains.redeemRewardCostL1;
|
|
||||||
redeemRewardCostL2 = this.props.livepeer.blockchains.redeemRewardCostL2;
|
|
||||||
claimTicketCostL1 = this.props.livepeer.blockchains.claimTicketCostL1;
|
|
||||||
claimTicketCostL2 = this.props.livepeer.blockchains.claimTicketCostL2;
|
|
||||||
withdrawFeeCostL1 = this.props.livepeer.blockchains.withdrawFeeCostL1;
|
|
||||||
withdrawFeeCostL2 = this.props.livepeer.blockchains.withdrawFeeCostL2;
|
|
||||||
l1Block = this.props.livepeer.blockchains.l1block;
|
|
||||||
l2Block = this.props.livepeer.blockchains.l2block;
|
|
||||||
stakeFeeCostL1 = this.props.livepeer.blockchains.stakeFeeCostL1;
|
|
||||||
stakeFeeCostL2 = this.props.livepeer.blockchains.stakeFeeCostL2;
|
|
||||||
commissionFeeCostL1 = this.props.livepeer.blockchains.commissionFeeCostL1;
|
|
||||||
commissionFeeCostL2 = this.props.livepeer.blockchains.commissionFeeCostL2;
|
|
||||||
serviceUriFeeCostL1 = this.props.livepeer.blockchains.serviceUriFeeCostL1;
|
|
||||||
serviceUriFeeCostL2 = this.props.livepeer.blockchains.serviceUriFeeCostL2;
|
|
||||||
}
|
}
|
||||||
|
if (claimTicketCostL1) {
|
||||||
|
claimTicketCostL1USD = (claimTicketCostL1 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (withdrawFeeCostL1) {
|
||||||
|
withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (stakeFeeCostL1) {
|
||||||
|
stakeFeeCostL1USD = (stakeFeeCostL1 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (commissionFeeCostL1) {
|
||||||
|
commissionFeeCostL1USD = (commissionFeeCostL1 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (serviceUriFeeCostL1) {
|
||||||
|
serviceUriFeeCostL1USD = (serviceUriFeeCostL1 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (l2GasFeeInGwei && ethPrice) {
|
||||||
|
if (redeemRewardCostL2) {
|
||||||
|
redeemRewardCostL2USD = (redeemRewardCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (claimTicketCostL2) {
|
||||||
|
claimTicketCostL2USD = (claimTicketCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (withdrawFeeCostL2) {
|
||||||
|
withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (stakeFeeCostL2) {
|
||||||
|
stakeFeeCostL2USD = (stakeFeeCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (commissionFeeCostL2) {
|
||||||
|
commissionFeeCostL2USD = (commissionFeeCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
if (serviceUriFeeCostL2) {
|
||||||
|
serviceUriFeeCostL2USD = (serviceUriFeeCostL2 * ethPrice).toFixed(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let redeemRewardCostL1USD = 0;
|
let eventsList = [];
|
||||||
let redeemRewardCostL2USD = 0;
|
if (livepeer.events) {
|
||||||
let claimTicketCostL1USD = 0;
|
eventsList = livepeer.events;
|
||||||
let claimTicketCostL2USD = 0;
|
}
|
||||||
let withdrawFeeCostL1USD = 0;
|
|
||||||
let withdrawFeeCostL2USD = 0;
|
|
||||||
let stakeFeeCostL1USD = 0;
|
|
||||||
let stakeFeeCostL2USD = 0;
|
|
||||||
let commissionFeeCostL1USD = 0;
|
|
||||||
let commissionFeeCostL2USD = 0;
|
|
||||||
let serviceUriFeeCostL1USD = 0;
|
|
||||||
let serviceUriFeeCostL2USD = 0;
|
|
||||||
if (l1GasFeeInGwei && ethPrice) {
|
|
||||||
if (redeemRewardCostL1) {
|
|
||||||
redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (claimTicketCostL1) {
|
|
||||||
claimTicketCostL1USD = (claimTicketCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (withdrawFeeCostL1) {
|
|
||||||
withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (stakeFeeCostL1) {
|
|
||||||
stakeFeeCostL1USD = (stakeFeeCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (commissionFeeCostL1) {
|
|
||||||
commissionFeeCostL1USD = (commissionFeeCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (serviceUriFeeCostL1) {
|
|
||||||
serviceUriFeeCostL1USD = (serviceUriFeeCostL1 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (l2GasFeeInGwei && ethPrice) {
|
|
||||||
if (redeemRewardCostL2) {
|
|
||||||
redeemRewardCostL2USD = (redeemRewardCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (claimTicketCostL2) {
|
|
||||||
claimTicketCostL2USD = (claimTicketCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (withdrawFeeCostL2) {
|
|
||||||
withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (stakeFeeCostL2) {
|
|
||||||
stakeFeeCostL2USD = (stakeFeeCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (commissionFeeCostL2) {
|
|
||||||
commissionFeeCostL2USD = (commissionFeeCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
if (serviceUriFeeCostL2) {
|
|
||||||
serviceUriFeeCostL2USD = (serviceUriFeeCostL2 * ethPrice).toFixed(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let eventsList = [];
|
let thisOrchObj;
|
||||||
if (this.props.livepeer.events) {
|
if (livepeer.selectedOrchestrator) {
|
||||||
eventsList = this.props.livepeer.events;
|
thisOrchObj = livepeer.selectedOrchestrator;
|
||||||
}
|
}
|
||||||
|
|
||||||
let thisOrchObj;
|
return (
|
||||||
if (this.props.livepeer.selectedOrchestrator) {
|
<div style={{ width: '100%', height: '100%' }}>
|
||||||
thisOrchObj = this.props.livepeer.selectedOrchestrator;
|
<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: '300px', right: '0px', overflow: 'hidden' }}>
|
||||||
}
|
<button className="homeButton" onClick={() => {
|
||||||
|
setRedirectToHome(true);
|
||||||
return (
|
}}>
|
||||||
<div style={{ width: '100%', height: '100%' }}>
|
<img alt="" src="livepeer.png" width="100em" height="100em" />
|
||||||
<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: '300px', right: '0px', overflow: 'hidden' }}>
|
</button>
|
||||||
<button className="homeButton" onClick={() => {
|
<div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '1em' }}>
|
||||||
this.setState({ redirectToHome: true });
|
<Orchestrator thisOrchestrator={thisOrchObj} />
|
||||||
}}>
|
</div>
|
||||||
<img alt="" src="livepeer.png" width="100em" height="100em" />
|
<div className="stroke metaSidebar" style={{ padding: 0, flex: 1 }}>
|
||||||
</button>
|
<div className="row" style={{ margin: 0, padding: 0 }}>
|
||||||
<div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '1em' }}>
|
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
|
||||||
<Orchestrator thisOrchestrator={thisOrchObj} />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="stroke metaSidebar" style={{ padding: 0, flex: 1 }}>
|
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
||||||
<div className="row" style={{ margin: 0, padding: 0 }}>
|
<Stat header={"Reward Call"} content={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} />
|
||||||
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
|
<Stat header={"Claim Ticket"} content={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} />
|
||||||
</div>
|
<Stat header={"Staking Fees"} content={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} />
|
||||||
<div className="stroke" style={{ margin: 0, padding: 0 }}>
|
<Stat header={"Change Commission"} content={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} />
|
||||||
<Stat header={"Reward Call"} content={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} />
|
<Stat header={"Change URI"} content={"$" + serviceUriFeeCostL2USD + " (vs " + serviceUriFeeCostL1USD + " on L1)"} />
|
||||||
<Stat header={"Claim Ticket"} content={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} />
|
|
||||||
<Stat header={"Staking Fees"} content={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} />
|
|
||||||
<Stat header={"Change Commission"} content={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} />
|
|
||||||
<Stat header={"Change URI"} content={"$" + serviceUriFeeCostL2USD + " (vs " + serviceUriFeeCostL1USD + " on L1)"} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div>
|
||||||
<EventViewer events={eventsList} setOrchFunction={this.props.getOrchestratorInfo} />
|
|
||||||
</div >
|
</div >
|
||||||
);
|
<EventViewer events={eventsList} prefill={prefill.get('orchAddr')} />
|
||||||
}
|
</div >
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
export default Livepeer;
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(Livepeer);
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect, batch } from "react-redux";
|
||||||
import {
|
import {
|
||||||
getVisitorStats
|
getVisitorStats
|
||||||
} from "./actions/user";
|
} from "./actions/user";
|
||||||
@ -20,20 +20,22 @@ const mapDispatchToProps = dispatch => ({
|
|||||||
getVisitorStats: () => dispatch(getVisitorStats()),
|
getVisitorStats: () => dispatch(getVisitorStats()),
|
||||||
login: () => dispatch(login()),
|
login: () => dispatch(login()),
|
||||||
getQuotes: () => dispatch(getQuotes()),
|
getQuotes: () => dispatch(getQuotes()),
|
||||||
getBlockchainData: () => dispatch(getBlockchainData()),
|
|
||||||
getEvents: () => dispatch(getEvents()),
|
getEvents: () => dispatch(getEvents()),
|
||||||
|
getBlockchainData: () => dispatch(getBlockchainData()),
|
||||||
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
|
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
class Startup extends React.Component {
|
class Startup extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.login();
|
batch(() => {
|
||||||
this.props.getVisitorStats();
|
this.props.login();
|
||||||
this.props.getQuotes();
|
this.props.getVisitorStats();
|
||||||
this.props.getBlockchainData();
|
this.props.getQuotes();
|
||||||
this.props.getEvents();
|
this.props.getBlockchainData();
|
||||||
this.props.getCurrentOrchestratorInfo();
|
this.props.getEvents();
|
||||||
|
this.props.getCurrentOrchestratorInfo();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return this.props.children;
|
return this.props.children;
|
||||||
|
|||||||
@ -2,6 +2,27 @@ import React from "react";
|
|||||||
import ScrollContainer from "react-indiana-drag-scroll";
|
import ScrollContainer from "react-indiana-drag-scroll";
|
||||||
import Stat from "./statViewer";
|
import Stat from "./statViewer";
|
||||||
|
|
||||||
|
function updateClipboard(newClip) {
|
||||||
|
navigator.clipboard.writeText(newClip).then(
|
||||||
|
() => {
|
||||||
|
console.log("Copied!");
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
console.log("Copy failed!");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyLink(addr) {
|
||||||
|
navigator.permissions
|
||||||
|
.query({ name: "clipboard-write" })
|
||||||
|
.then((result) => {
|
||||||
|
if (result.state === "granted" || result.state === "prompt") {
|
||||||
|
updateClipboard(addr);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const Orchestrator = (obj) => {
|
const Orchestrator = (obj) => {
|
||||||
let rewardCut = 0;
|
let rewardCut = 0;
|
||||||
let feeCut = 0;
|
let feeCut = 0;
|
||||||
@ -41,7 +62,7 @@ const Orchestrator = (obj) => {
|
|||||||
return (
|
return (
|
||||||
<div className="hostInfo">
|
<div className="hostInfo">
|
||||||
<div className="strokeSmollLeft" style={{ display: "flex" }}>
|
<div className="strokeSmollLeft" style={{ display: "flex" }}>
|
||||||
<div style={{ flexDirection: 'row', display: "flex" }} style={{marginTop: '1em'}}>
|
<div style={{ flexDirection: 'row', display: "flex" }} style={{ marginTop: '1em' }}>
|
||||||
<a href={thisUrl}>
|
<a href={thisUrl}>
|
||||||
<h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
|
<h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
|
||||||
{thisID}
|
{thisID}
|
||||||
@ -52,11 +73,16 @@ const Orchestrator = (obj) => {
|
|||||||
<Stat header={"Fee Cut"} content={feeCut + "%"} />
|
<Stat header={"Fee Cut"} content={feeCut + "%"} />
|
||||||
<Stat header={"Total Stake"} content={totalStake + " LPT"} />
|
<Stat header={"Total Stake"} content={totalStake + " LPT"} />
|
||||||
<Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
|
<Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
|
||||||
|
<button className="homeButton" onClick={() => {
|
||||||
|
copyLink(window.location.href + "?orchAddr=0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e");
|
||||||
|
}}>
|
||||||
|
<img alt="" src="clipboard.svg" width="20em" height="20em" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
|
<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'}}>
|
<div className="row" style={{ marginTop: '1em' }}>
|
||||||
<h3 style={{ padding: 0, margin: 0 }}>Current Delegators</h3>
|
<h3 style={{ padding: 0, margin: 0 }}>Current Delegators</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="content-wrapper">
|
<div className="content-wrapper">
|
||||||
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
<ScrollContainer className="overflow-container" hideScrollbars={false}>
|
||||||
<div className="overflow-content" style={{ cursor: 'grab', height: '300px' }}>
|
<div className="overflow-content" style={{ cursor: 'grab', height: '300px' }}>
|
||||||
|
|||||||
@ -341,6 +341,9 @@ svg {
|
|||||||
box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
|
box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(6px);
|
||||||
}
|
}
|
||||||
|
.homeButton:active {
|
||||||
|
box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
|
||||||
|
}
|
||||||
.homeButton:disabled {
|
.homeButton:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user