mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +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,37 +98,37 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -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>
|
||||||
|
|||||||
@ -1,39 +1,16 @@
|
|||||||
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()),
|
|
||||||
getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
|
|
||||||
});
|
|
||||||
|
|
||||||
class Grafana extends React.Component {
|
|
||||||
state = {
|
|
||||||
redirectToHome: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.state.redirectToHome) {
|
|
||||||
return <Navigate push to="/" />;
|
return <Navigate push to="/" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,14 +18,14 @@ class Grafana extends React.Component {
|
|||||||
let ethPrice = 0;
|
let ethPrice = 0;
|
||||||
let lptPriceChange24h = 0;
|
let lptPriceChange24h = 0;
|
||||||
let ethPriceChange24h = 0;
|
let ethPriceChange24h = 0;
|
||||||
if (this.props.livepeer.quotes) {
|
if (livepeer.quotes) {
|
||||||
if (this.props.livepeer.quotes.LPT) {
|
if (livepeer.quotes.LPT) {
|
||||||
lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
|
lptPrice = livepeer.quotes.LPT.price.toFixed(2);
|
||||||
lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
lptPriceChange24h = livepeer.quotes.LPT.percent_change_24h.toFixed(2);
|
||||||
}
|
}
|
||||||
if (this.props.livepeer.quotes.ETH) {
|
if (livepeer.quotes.ETH) {
|
||||||
ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
|
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
|
||||||
ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
ethPriceChange24h = livepeer.quotes.ETH.percent_change_24h.toFixed(2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -56,7 +33,7 @@ class Grafana extends React.Component {
|
|||||||
<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="row" style={{ margin: 0, padding: 0 }}>
|
||||||
<button className="homeButton" onClick={() => {
|
<button className="homeButton" onClick={() => {
|
||||||
this.setState({ redirectToHome: true });
|
setRedirectToHome(true);
|
||||||
}}>
|
}}>
|
||||||
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
<img alt="" src="/livepeer.png" width="100em" height="100em" />
|
||||||
</button>
|
</button>
|
||||||
@ -81,8 +58,8 @@ class Grafana extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
|
<div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
|
||||||
<div className="row" style={{paddingLeft: "1em", paddingRight: "1em"}}>
|
<div className="row" style={{ paddingLeft: "1em", paddingRight: "1em" }}>
|
||||||
<Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
|
<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&refresh=5s&theme=dark&panelId=23763572056" height="200" 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>
|
||||||
@ -111,10 +88,6 @@ class Grafana extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
export default Grafana;
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(Grafana);
|
|
||||||
|
|||||||
126
src/livepeer.js
126
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,62 +11,45 @@ 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]);
|
||||||
|
|
||||||
render() {
|
if (redirectToHome) {
|
||||||
if (this.state.redirectToHome) {
|
|
||||||
return <Navigate push to="/" />;
|
return <Navigate push to="/" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
let lptPrice = 0;
|
|
||||||
let ethPrice = 0;
|
let ethPrice = 0;
|
||||||
let lptPriceChange24h = 0;
|
if (livepeer.quotes) {
|
||||||
let ethPriceChange24h = 0;
|
if (livepeer.quotes.ETH) {
|
||||||
if (this.props.livepeer.quotes) {
|
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let blockchainTime = 0;
|
|
||||||
let l1Block = 0;
|
|
||||||
let l2Block = 0;
|
|
||||||
let l1GasFeeInGwei = 0;
|
let l1GasFeeInGwei = 0;
|
||||||
let l2GasFeeInGwei = 0;
|
let l2GasFeeInGwei = 0;
|
||||||
let redeemRewardCostL1 = 0;
|
let redeemRewardCostL1 = 0;
|
||||||
@ -81,24 +64,21 @@ class Livepeer extends React.Component {
|
|||||||
let commissionFeeCostL2 = 0;
|
let commissionFeeCostL2 = 0;
|
||||||
let serviceUriFeeCostL1 = 0;
|
let serviceUriFeeCostL1 = 0;
|
||||||
let serviceUriFeeCostL2 = 0;
|
let serviceUriFeeCostL2 = 0;
|
||||||
if (this.props.livepeer.blockchains) {
|
if (livepeer.blockchains) {
|
||||||
blockchainTime = this.props.livepeer.blockchains.timestamp;
|
l1GasFeeInGwei = livepeer.blockchains.l1GasFeeInGwei;
|
||||||
l1GasFeeInGwei = this.props.livepeer.blockchains.l1GasFeeInGwei;
|
l2GasFeeInGwei = livepeer.blockchains.l2GasFeeInGwei;
|
||||||
l2GasFeeInGwei = this.props.livepeer.blockchains.l2GasFeeInGwei;
|
redeemRewardCostL1 = livepeer.blockchains.redeemRewardCostL1;
|
||||||
redeemRewardCostL1 = this.props.livepeer.blockchains.redeemRewardCostL1;
|
redeemRewardCostL2 = livepeer.blockchains.redeemRewardCostL2;
|
||||||
redeemRewardCostL2 = this.props.livepeer.blockchains.redeemRewardCostL2;
|
claimTicketCostL1 = livepeer.blockchains.claimTicketCostL1;
|
||||||
claimTicketCostL1 = this.props.livepeer.blockchains.claimTicketCostL1;
|
claimTicketCostL2 = livepeer.blockchains.claimTicketCostL2;
|
||||||
claimTicketCostL2 = this.props.livepeer.blockchains.claimTicketCostL2;
|
withdrawFeeCostL1 = livepeer.blockchains.withdrawFeeCostL1;
|
||||||
withdrawFeeCostL1 = this.props.livepeer.blockchains.withdrawFeeCostL1;
|
withdrawFeeCostL2 = livepeer.blockchains.withdrawFeeCostL2;
|
||||||
withdrawFeeCostL2 = this.props.livepeer.blockchains.withdrawFeeCostL2;
|
stakeFeeCostL1 = livepeer.blockchains.stakeFeeCostL1;
|
||||||
l1Block = this.props.livepeer.blockchains.l1block;
|
stakeFeeCostL2 = livepeer.blockchains.stakeFeeCostL2;
|
||||||
l2Block = this.props.livepeer.blockchains.l2block;
|
commissionFeeCostL1 = livepeer.blockchains.commissionFeeCostL1;
|
||||||
stakeFeeCostL1 = this.props.livepeer.blockchains.stakeFeeCostL1;
|
commissionFeeCostL2 = livepeer.blockchains.commissionFeeCostL2;
|
||||||
stakeFeeCostL2 = this.props.livepeer.blockchains.stakeFeeCostL2;
|
serviceUriFeeCostL1 = livepeer.blockchains.serviceUriFeeCostL1;
|
||||||
commissionFeeCostL1 = this.props.livepeer.blockchains.commissionFeeCostL1;
|
serviceUriFeeCostL2 = livepeer.blockchains.serviceUriFeeCostL2;
|
||||||
commissionFeeCostL2 = this.props.livepeer.blockchains.commissionFeeCostL2;
|
|
||||||
serviceUriFeeCostL1 = this.props.livepeer.blockchains.serviceUriFeeCostL1;
|
|
||||||
serviceUriFeeCostL2 = this.props.livepeer.blockchains.serviceUriFeeCostL2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let redeemRewardCostL1USD = 0;
|
let redeemRewardCostL1USD = 0;
|
||||||
@ -155,20 +135,20 @@ class Livepeer extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let eventsList = [];
|
let eventsList = [];
|
||||||
if (this.props.livepeer.events) {
|
if (livepeer.events) {
|
||||||
eventsList = this.props.livepeer.events;
|
eventsList = livepeer.events;
|
||||||
}
|
}
|
||||||
|
|
||||||
let thisOrchObj;
|
let thisOrchObj;
|
||||||
if (this.props.livepeer.selectedOrchestrator) {
|
if (livepeer.selectedOrchestrator) {
|
||||||
thisOrchObj = this.props.livepeer.selectedOrchestrator;
|
thisOrchObj = livepeer.selectedOrchestrator;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100%', height: '100%' }}>
|
<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: '300px', right: '0px', overflow: 'hidden' }}>
|
<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={() => {
|
<button className="homeButton" onClick={() => {
|
||||||
this.setState({ redirectToHome: true });
|
setRedirectToHome(true);
|
||||||
}}>
|
}}>
|
||||||
<img alt="" src="livepeer.png" width="100em" height="100em" />
|
<img alt="" src="livepeer.png" width="100em" height="100em" />
|
||||||
</button>
|
</button>
|
||||||
@ -188,13 +168,9 @@ class Livepeer extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div >
|
||||||
<EventViewer events={eventsList} setOrchFunction={this.props.getOrchestratorInfo} />
|
<EventViewer events={eventsList} prefill={prefill.get('orchAddr')} />
|
||||||
</div >
|
</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() {
|
||||||
|
batch(() => {
|
||||||
this.props.login();
|
this.props.login();
|
||||||
this.props.getVisitorStats();
|
this.props.getVisitorStats();
|
||||||
this.props.getQuotes();
|
this.props.getQuotes();
|
||||||
this.props.getBlockchainData();
|
this.props.getBlockchainData();
|
||||||
this.props.getEvents();
|
this.props.getEvents();
|
||||||
this.props.getCurrentOrchestratorInfo();
|
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,9 +73,14 @@ 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">
|
||||||
|
|||||||
@ -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