ethersphere/bee-dashboard

An app which helps users to setup their Bee node and do actions like cash out cheques

Bee Dashboard

An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or manage your postage stamps.

Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.

This project is intended to be used with Bee version 1.12.0-88c1d236. Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the official Discord and by keeping an eye on the releases tab.

Node Setup	Upload Files	Download Content	Accounting	Settings

Table of Contents

• Install
• Usage
  • Terminal
  • Docker
• Contribute
• Development
• Maintainers
• License

Install

Install globally with npm. We require Node.js's version of at least 12.x and npm v6.x (or yarn v2.x).

npm install -g @ethersphere/bee-dashboard

Usage

⚠️ To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by setting cors-allowed-origins: ['*'] and debug-api-enable: true in the Bee config file and then restart the Bee node. To see where the config file is, consult the official Bee documentation

Terminal

To start use:

bee-dashboard

This should open the webpage on http://localhost:8080

You can also define your own port with the PORT environment variable. E.g.

export PORT=3005
bee-dashboard

Will start the bee-dashboard on http://localhost:3005

Docker

To build Docker image and run it, execute the following from inside project directory:

docker build . -t bee-dashboard
docker run --rm -p 127.0.0.1:8080:8080 bee-dashboard

Bee dashboard is now available on http://localhost:8080

Development

git clone [email protected]:ethersphere/bee-dashboard.git

cd  bee-dashboard

npm i

npm start

The Bee Dashboard runs in development mode on http://localhost:3031/

Environmental variables

The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. We support following variables:

• REACT_APP_BEE_DESKTOP_ENABLED (boolean) that toggles if the Dashboard is in Desktop mode or not.
• REACT_APP_BEE_DESKTOP_URL (string) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served.
• REACT_APP_BEE_HOST (string) defines custom Bee API URL to be used as default one. By default, the http://localhost:1633 is used.
• REACT_APP_BEE_DEBUG_HOST (string) defines custom Bee Debug API URL to be used as default one. By default, the http://localhost:1635 is used.
• REACT_APP_DEFAULT_RPC_URL (string) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default https://xdai.fairdatasociety.org is used.

Swarm Desktop development

If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up swarm-desktop to the point where Desktop is initialized (eq. the splash screen disappear) and:

echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local

npm start
npm run desktop # This will inject the API key to the Dashboard 

Contribute

There are some ways you can make this module better:

• Consult our open issues and take on one of them
• Help our tests reach 100% coverage!
• Join us in our Discord chat in the #develop-on-swarm channel if you have questions or want to give feedback

Maintainers

• Cafe137

See what "Maintainer" means here.

License

BSD-3-Clause

bee-dashboard's Issues

Investigate if the address into BZZaar can not be pre-filled

Originally posted by @agazso in #31 (comment)

Add Dockerfile support

Add a Dockerfile for support container publication.

Node ID should be changed to Swarm Overlay Address

It also probably is not all that interesting information for most users and should probably be accompanied with other information like ETH address, PSS key etc.

Add Repository Description

Currently the repo doesn't contain a description which may make it harder for people to discern what the project is.

Add error boundaries to at least each page

Currently if any error happens in the app (e.g. endpoints change as they will in 0.6.0) the app just crashes. At minimum each page content should be in Error boundary https://reactjs.org/docs/error-boundaries.html

Remove nnLowWatermark on `peers` page

Identify ethereum network connection to user

Currently bee nodes do not have an endpoint that returns the network id that the node is connected to. Once that endpoint becomes available display to user the current network and if they need to change networks

git clone https: vs git clone git@

Tried cloning the repository on both Windows and Ubuntu using the git clone command from the readme:

git clone [email protected]:ethersphere/bee-dashboard.git
Cloning into 'bee-dashboard'...
The authenticity of host 'github.com (140.82.112.3)' can't be established.
RSA key fingerprint is
SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,140.82.112.3' (RSA) to the list of known hosts.
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights and the repository exists.

but that failed on both platforms, but the following worked:

https://github.com/ethersphere/bee-dashboard.git

Health of API and debug API should be websocket connection

Both standard API and debug API should have health endpoint which would be websocket. This way the bee-status can monitor the endpoint and alert user if anything goes wrong.

Peers should not be removable

Download should just direct to new window with <BEE_NODE>/bzz/<hash>

It should also validate the hash with Utils from bee-js and show any issues to the user.

Users should be able to specify bee node API and debug API URLs

Currently the status app assumes the default APIs - localhost:1633 & :1635 . It should allow changing this URL e.g. directly in the first step of the Node Setup through a button. or maybe in the Settings page?

Setup CI with tests and linting

Props drilling

Propa are pften propagated without any modification through several components. This is generally not advisable and instead we should put the props values as close to the final component as possible.

File download does not work

It now downloads corrupted zip file. It should also be refactored into more react way where there is no DOM manipulation just setting local state and displaying the right components.

AntTabs should be extracted into reusable component

They are right now defined inside of two components https://github.com/ethersphere/bee-status/search?q=antTab

• AccountingPage https://github.com/ethersphere/bee-status/blob/master/src/pages/accounting/index.tsx
• CodeBlocksTabs https://github.com/ethersphere/bee-status/blob/master/src/components/CodeBlockTabs.tsx

Should be extracted out and reused.

Troubleshooting OS tabs should be syncronized

Changing tab from Linux to macOS should alter all the tab instances.

Eliminate nested ternary operators

Right now there is a number of nested ternary operators in several components. All of them have a // FIXME comment and should be removed.

Replace axios calls with bee-js

Change prettier endOfLine to "auto"

Currently in file .prettierrc is set as

{
  ...
  "endOfLine": "lf",
  ...
}

and this prevent to compile with windows.

Instead it should be set "endOfLine": "auto".

Changing bee urls should not require page reload

Bee and BeeDebug instances should be singletons living in some provider and all hooks should observe changes of the instance and refresh if the urls are changed.

Windows Compatibiity?

Just tried to install this on Windows 10 and it appeared that the installation worked except for one error-ish looking thing on "npm run build":

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'D:\Program Files\nodejs\node.exe',
1 verbose cli 'D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH:
9 verbose lifecycle [email protected]build: CWD: D:\Swarm-Bee\bee-dashboard
10 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'react-scripts build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: react-scripts build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (D:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (D:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\Swarm-Bee\bee-dashboard
16 verbose Windows_NT 10.0.19041
17 verbose argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v14.16.0
19 verbose npm v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: react-scripts build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

But the "npm run serve" still offered the local URL, but all that comes out in the browser is an "Index of build/" that shows favicon.ico, manifest.json, and robots.txt.

Any suggestions on what I can try to see what might be going worng (sic)?

Withdraw/deposit is denominated in BZZ digits

The withdraw and deposit modals use the smallest denomination of bzz and not 10^16 value. So inputing 1,000,000 means only 10^-10 BZZ will be transferred. This is not necessarilly wrong but should be clear to the users as the balances elsewhere in the app usually show the amount/10^16

Use string literals for tab indexes and other similar uses

Originally posted by @agazso in #31 (comment)

Add support for manage multiple nodes

Currently only a single node is supported at time. This would be required also for #58

Add health indicator to depth / population/ connected peer count

In the peers page there are currently metrics for population, connected peer count and depth as just numbers. These are interesting for advanced user, but most users will have no idea what that means and what are "good numbers".

The task is to also add an indicator that would show whether these values are as expected and ideally provide some broader context (without overwhelming the user)

Add Multi OS support for Troubleshooting commands

Description:
The UI has code blocks defined for troubleshooting node setup. These code blocks should support multiple OS types

Automatically detect OS for the troubleshooting tabs

The screenshot below is opened on macOS and hence the macOS tab should be selected

ununtu 18.04 intall error

Skipping 'fsevents' build as platform linux is not supported

[email protected] install /home/ipfsmain/yc/project/bee-status/node_modules/watchpack-chokidar2/node_modules/fsevents
node install.js

Skipping 'fsevents' build as platform linux is not supported
added 1929 packages in 11.001s

Indicate and check supported Bee version by Bee Dashboard

The API endpoints between different versions of Bee can change and hence break the app. The version of Bee should be checked against version that the Bee Dashboard has been checked against. For that we can use bee-js function isSupportedVersion or the constants SUPPORTED_BEE_VERSION and SUPPORTED_BEE_VERSION_EXACT.

Users should be warned the app may not work well but the app should attempt to load as much as possible.

Review Setup Wizard Steps, Logic, and Wording

Description: Currently the node setup logic is split up into the following steps for validating and onboarding a new bee node.

I would like to reach a consensus on if these steps make sense, if the logic for evaluating the conditions is sound, and if the wording / help steps can be modified or expanded upon to be more helpful.

1. Connection Check

• Check Node API Status (:1633)

Logic: Currently im not aware of any endpoint that will report the health / status of this endpoint so for now I am making a call to the index endpoint (http://localhost:1633) and checking for a proper response

• Check Debug API Status (:1635)

Logic: Call to /health and checking for status of "ok". Not sure if I should use /health or /readiness and what the difference between the two is.

2. Version Check

Logic: Api call to https://api.github.com/repos/ethersphere/bee/releases/latest and then retrieve latest version from name parameter and compare to the version retrieved from /health call.

3. Connect to Ethereum Blockchain

Logic: Right now its only calling /addresses and checking for the existence of the ethereum address. I think this can be improved to check something else to validate blockchain connection.

4. Deploy and Fund Chequebook

Logic: Right now its only calling /chequebook/address and checking for the existence of the chequebookaddress address. I think this can be improved and steps can be added to help deploy and fund the contract.

5. Connect to Peers

Logic: Call /peers checking for a connection value of greater than 0.

6. Complete

After completing the following steps the user is redirected to the following status page for monitoring a node that has already been setup

Node setup page should be accessible even when everything is green

Currently, once the node is setup properly, the Node Setup details disappears and only status data are shown. Ideally both should always be visible.

Setup should not be expanded by default

Having a bunch of details displayed by default can be intimidating.

• Users should expand it at their own leisure.
• There should be an indicator these steps are clickable. Maybe expand button?
• The labels should be aligned to left
• Clicking on the step number should also be possible (right now only the label is clickable)

Cashout from multiple peers with one button

When node is not setup, pages requiring the node connection should be disabled

Currently, even if the bee node is not setup correctly yet, users can navigate to pages like peers or accounting and see pretty much blank pages. The easiest thing to do is to disable these pages.

Node API check should not be part of first check

With the latest changes to the debug API (not yet released), some endpoints now start even if all the conditions are not met (unlike the node API). The Node API check should probably be one of the last as it needs pretty much all the previous steps to start.

Show API and debug API status in the left navigation

Rationale
Pretty much all the pages require connection to the API of the bee node and many to the debug API. However, except for the status page, it is unclear whether the connection is working.

Task
Display the connection to bee API and debug API in the bottom left corner or some other appropriate place

Accounting table errors out if any peer uncashed balances fails

In the current design, we have to query and calculate any uncashed amount per each peer. This is potentially a lot of API calls where each one of them may fail. In the current design, if any fails the whole table gets hidden.

The ideal fix means that there is an endpoint on Bee for all peers which includes the uncashed amount, but maybe some other approach can be taken like making the request for few peers at time.

Relevant code blocks:

• retrieving the uncashed amount https://github.com/ethersphere/bee-dashboard/blob/master/src/hooks/accounting.ts#L91-L103
• displaying error instead of the component if anything goes wrong https://github.com/ethersphere/bee-dashboard/blob/master/src/pages/accounting/index.tsx#L64-L69

300 max peers?

I have a DAppNode bee running that has 468 connected peers (ID starts with 0xf40...) in the /peers Debug API response. But bee-dashboard is only showing 300 peers on the top of both the Status and Peers tabs and also only 300 in the Peers list.

Is this a limit in bee-dashboard or bee-js?

Postage stamps page

Format balance numbers

The balance numbers should

• use monospace font
• be aligned to the right
• have same number of digits
• should not use scientific notation
• have separators (whitespace for each thousand(th) )
• mention units (BZZ or gBZZ)

Remove functionality that is not implemented/working

Show private key

It would be quite useful to be able to retrieve private key (probably only after hitting some reveal button) so that it can be easily copied into 3rd party wallet.

Theme change should not require page reload

Right now changing theme from light to dark requires the page to reload. This is not necessary. The value should be stored in a Theme provider which also exposes a switch between light and dark theme and is responsible for writing it into local storage.

Bee and BeeDebug classes should be provided through context provider

Right now changing any of these URLs means the app needs to reload. This is not very user friendly so we should instead have both instances in a context provider. Instantiating it for each call is also unnecessary.

Add i18n Support

Since this tool is targeting all people, we should include internationalization / translations in the app sooner rather than later. Bee Discord community has both Chinese and Russian specific channels, these make good first languages to target.

Error handling

We often ignore errors that are caused by API calls. This should be refactored and errors handled properly.

Use notistack for notifications

Currently some components use notifications for successful or error notifications. These are usually implemented locally on a page. Instead we should have a global provider and just actions to trigger the notification. Notistack already has this functionality and is recommended by material-ui https://material-ui.com/components/snackbars/#notistack

Passing null props or using ‘?’ Operator too much

We often pass props that can be null all to the components which frequently test them or use attribute assertion. Ideally these values should only be teste once.

Support for bee 0.6.0