Bisq Dashboard: Re-implement the Bisq Markets API, create a new realtime Bisq Markets website with DAO reporting, widgets, etc. and integrate it into the main Bisq Website

[wiz]

This is a Bisq Network project. Please familiarize yourself with the project management process.

Description

Following from the success of #37, this project expands the Bisq Explorer backend to serve the Markets API endpoints, and implements a new Bisq Market website frontend to show market data and vital non-technical performance metrics for the Bisq network on 1 screen through a combination of graphs, tables, and text so that users and BSQ stakeholders can easily get a pulse of network activity and health.

Rationale

• The current Bisq Markets API is again having major issues. Despite running on very powerful hardware, the API is overloaded because of the inefficient PHP architecture which doesn’t use a database and re-parses over 50MB of JSON data for each and every request. The Bisq Explorer backend is written in NodeJS and keeps all Bisq data indexed in RAM for fast serving of API requests.

• The current bisq.network/markets website is slow and outdated, has old assets that are no longer traded, the graph and pull-down search have various issues, and the data does not update in realtime. The angular frontend architecture that Bisq Explorer uses is very fast and modern and is updated in realtime.

• The current bisq.network/stats graphs are currently updated by a human at the end of each cycle. The growth team wants to enhance the bisq.network/stats with full Markets and DAO metrics, updated in realtime, with information about all trade events and how the trade volume goes into Bisq trading revenue DAO expenses, issuance, burning, etc.

Criteria for delivery Milestone 1: New Backend to replace existing Markets API

• Re-implement all Bisq Markets API endpoints and functionality into NodeJS backend that parses bisq-statsnode's JSON data and keeps it all in RAM for quick access
• Add support for the NodeJS cluster module so we can load balance across multiple NodeJS processes
• Migrate the production Bisq Markets API service to new NodeJS architecture
• Repoint markets.bisq.network to bisq.markets hostname

Criteria for delivery Milestone 2: New Frontend (part 1 of 2) with new APIs in backend

General

• Implement subscriptions for realtime Bisq Markets data updates over websocket connection into NodeJS backend
• Implement new Angular component on mempool frontend for bisq.markets that displays updated Markets data and graphs updated in realtime

Front page table

• List all currently traded assets similar to https://coinmarketcap.com/exchanges/bisq/

Front page graph

• Display realtime updated graph similar to https://cryptowat.ch/charts/BISQ:BTC-USD

Criteria for delivery Milestone 3: New Frontend (part 2 of 2) with new APIs in backend

General

• Implement widgets for statistics that can be embedded into main Bisq website such as BSQ issuance/burnt per cycle, etc.

Cycle voting metrics

• Number of proposals
• Number of votes
• Total voting weight

Trading statistics, by cycle

• Trading activity broken down by market
• Ordered by number of trades, trading volume, etc
• Overall cycle figures such as average trades per day, average trade size, premium paid, etc.

BSQ issuance, by cycle

• Total issuance, categorized by issuance type (compensation or reimbursement; total issuance should not include refundagent reimbursement)
• Total issuance, categorized by team
• Include top 5-10 titles of compensation request line items (ordered by amount, descending) to give a quick idea of what work each team accomplished in the cycle

BSQ burn, by cycle

• Total burn, categorized by type (proof_of_burn should be included but pointed out)
• Total BSQ supply, as it stood at the end of each respective cycle
• Also show trend over time somewhere (ideally BSQ issuance and burn over time could be overlayed on this graph)

Proposals voted upon in each DAO cycle

• Will start labeling proposals submitted to DAO for voting on GitHub (e.g., dao-cycle-15-vote) so relevant list can be obtained automatically
• No need for any details on outcome; simply list titles of proposals with link to corresponding GitHub issue

Miscellaneous

• Repayment status for security incident

Measures of success

When the following are achieved, we can consider this project to be a success:

• Bisq Markets API is fast again using new implementation
• The new Bisq Markets website is live on bisq.markets
• The main bisq.network website is using the new markets widgets
• The growth team is happy with the new realtime Markets/DAO reporting pages

Risks

• The Markets API must be re-implemented exactly as it currently works, so existing integrations do not break. Current documentation is listed at https://markets.bisq.network/api

• The legacy hostnames that serve the Bisq Markets API include market.bitsquare.io, market.bisq.io, markets.bisq.network, and others. These must be redirected to the new API hostname on bisq.markets`

Estimates

Ops: $5000 USD for Milestone 1 for Bisq Markets API
Growth: $2500 USD for Milestone 2 for Bisq Markets Website part 1, $2500 USD for Milestone 3

[m52go]

One approach for designing the page on this new site for DAO health:

See more details and comments here. As mentioned above, the goal is for some of these visuals to be modular, so [some of them] can be plugged in to a re-built stats page (bisq.network/stats).

@jmacxx and @MwithM feel free to take a look and suggest feedback, if you like.

[wiz]

We should probably also display the current Bisq Price Index numbers from the new Pricenodes https://bisq.wiki/Bisq_Price_Indices - we need a page like BitMEX has for their indices https://www.bitmex.com/app/indices

[softsimon]

After some discussions the way I will implement this is similar to as stated in the General tasks list above:

• Extend the current Mempool and Bisq backend with the parsing and serving of the markets api data. So that we have a single nodejs backend serving Bitcoin, Bisq DAO and Markets API data inluding live push data from a WebSocket
• Create a new standalone front end application in Angular using https://pedromvpg.com/#Bisq Bisq Design guidelines to mimic the current dark mode client design.

I will focus on making the markets web app realtime with new data being pushed through the websocket.

A development server will be up during the development to continuously get feedback on the design and features.

[thehapax]

Hi. I can help with the charts, statistics and any other supporting development work.

[softsimon]

I just made a rough mockup. How about something like this for landing page for the new bisq.markets site?

[wiz]

@softsimon looks cool, on that page you can have the prices update in realtime from the Bisq Price Indices - I spoke with @m52go and we're going to assign this project to you, so please get started 😁

[wallclockbuilder]

@wiz Is milestone 2 still up for grabs? Is it still assigned to @softsimon ?
I’m available to start working on this ASAP.

[wiz]

Actually, I was just discussing this with @m52go, since MS2 got stalled we decided to move some of the tasks from MS2 into a new MS3 so @softsimon can proceed with MS2 now

[kiocosta]

@wiz hi, is the info here still updated? The development of an Angular frontend spiked me interest, but I'm not sure if this is still work TBD/anyone is working on it

[wiz]

this is ancient it was completed and ran for years and then abandoned