feat: initial Proof of Concept UI (#1)

* initial dashboard layout

* add node status card

* add accounting section, pull peer data

* add file functionality with bee-js,  first iteration of accounts page

* Add balances and chequebook table

* add blockie / identicon for addresses

* add basic settlements table

* implement theme overrides

* cleanup logging

* Add troubleshooting block

* add initial dark theme support, add copy to clipboard, QR code support

* show active element on sidebar

* remove duplicate status page and make status page index

* Update package.json

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

* Update public/index.html

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

* Update src/pages/accounting/AccountCard.tsx

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

* change bee api client to use beeJS library

* add initial setup workflow

* breakout ethereum address component, define initial setup workflow

* add types to responses, add additional node troubleshooting info to workflow

* make setup steps nonlinear and interactive

* make host endpoint dynamic on setup

* split out api calls into custom hooks, add component loading indicators

* add depost / withdrawl functionality, show transactions in BZZ

* add multiOS code support troubleshooting, check for balance in chequebook on setup

* add ability to change apis in settings page

* show file loading status

* Style active sidebar item

* reload on theme change

* modify troubleshooting verbage, add cashout functionality and details,

* facilitate file upload with beeJS

* update readme to show UI samples

* remove nnPeersWatermark from peers page

* split node steps into separate components, make status page visible at anytime

* minor UI/UX enhancements

* format accounting page

* remove WIP wallet connection code

* Update src/components/CashoutModal.tsx

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

* use bigint for deposits/withdrawls

* revise status card

* clean up unused imports and variables

* add api status to sidebar

* obfuscate pages with troubleshooting component when apis not connected

* add localhost OS detection for troubleshooting code

* cleanup extra logos

* monospace BZZ in tables

* hide troubleshooting page while loading API status

* Remove ability to remove peers

* add null types to API responses

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
matmertz25
2021-03-12 12:01:56 -05:00
committed by GitHub
parent f4ce271479
commit 34d2dfda5a
60 changed files with 6155 additions and 364 deletions
+101
View File
@@ -0,0 +1,101 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 230.07104 58.680001"
version="1.1"
id="svg28566"
sodipodi:docname="swarm-logo.svg"
inkscape:version="1.0.1 (3bc2e81, 2020-09-07)"
width="230.07104"
height="58.68">
<metadata
id="metadata28570">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1016"
id="namedview28568"
showgrid="false"
inkscape:zoom="3.1325"
inkscape:cx="123.33"
inkscape:cy="35.939998"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_2"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<defs
id="defs28540">
<style
id="style28538">.cls-1{fill:#fafafa;}.cls-2{fill:#242424;}</style>
</defs>
<title
id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
<g
id="Layer_2"
data-name="Layer 2"
transform="translate(-76.67,-71.05)">
<path
class="cls-2"
d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z"
id="path28546" />
<path
class="cls-2"
d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z"
id="path28548" />
<path
class="cls-2"
d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z"
id="path28550" />
<path
class="cls-2"
d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z"
id="path28552" />
<path
class="cls-2"
d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z"
id="path28554" />
<polygon
class="cls-2"
points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 "
id="polygon28556" />
<polygon
class="cls-2"
points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 "
id="polygon28558" />
<polygon
class="cls-2"
points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 "
id="polygon28560" />
<polygon
class="cls-2"
points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 "
id="polygon28562" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB