Frontend Contest: TON status page, Stage 1

[EmelyanenkoK]

🏆 Frontend contest: TON status page

Prize fund: $30’000 in Toncoins (currently 10’000 TON).

Deadline: 18:00 on Nov, 17 (UTC).

Task:
Create a web app and corresponding open-source backend, which display summarized data on the state and availability of TON Blockchain.

In particular, the page should display:

• Performance and block rate of TON chains: masterchain and basechain (note that there may be more than one shard on basechain)
• Performance and responsiveness of primary TON services: ton.org, ton.sh, toncenter.com
• TON/ETH and TON/BSC bridge operability status
• Status of main on-chain governance activity: validator elections, config votings, slashing.
• Public liteservers performance: response time and sync state
• Public DHT-servers performance
• Basic on-chain stats: tps, accounts activity, transferred amount by type, number of validators

API and integration with notification services (Telegram channel/bot) will increase your chances to win.

Evaluation priorities:

• The coverage and detail of basic metrics.
• Speed and aesthetic appearance.
• The complexity of the service deployment (we expect detailed instructions).
• Understandability of the code and the possibility of its further support.

Who can take part: Anyone.

How do I submit:

Comment on this issue on GitHub by attaching an archive or link to the open-source code with a solution, a description of the functionality, the build process, your TON address to receive an award. Submission must be under the MIT license.

To avoid plagiarism, you can attach a link to a private repo to the submission and hash of the last commit, which you will make public after the deadline.

[dharnarh]

Question: Are we to build the open-source backend or consume an already available one?

[EmelyanenkoK]

Using of publicly available APIs are not forbidden, however since it is expected that status page will display status of those APIs too, perfect solution still requires it's own backend.

[danieldanielecki]

Why is the deadline so short? :( can't do it due to traveling :(((
Ton could have a bunch of high-quality fronted submissions. Done once, but good, and forever. The last contest with the IDE tool, I believe, had only two submissions... Please learn on this; I'd love to try it out!

[RamaBerthin]

Deadline is too short.

[StanKryvenko]

Should it be written on specific language? Could it be .net?

[undrfined]

https://github.com/undrfined/tonstatus-backend (2fb2b45)
https://github.com/undrfined/tonstatus (eae0c89)

tonstatus-backend repo has frontend as a git submodule, so there's no need to pull the second repo

git clone https://github.com/undrfined/tonstatus-backend --recurse-submodules
cd tonstatus-backend
docker compose up

Screenshots

Implemented:

• Performance and block rate of TON chain
• Basic on-chain stats: TPS, number of validators (online/total)
• TON/ETH and TON/BSC bridge operability status
• Public liteservers performance: response time and sync state
• Performance and responsiveness of primary TON services: ton.org, ton.sh, toncenter.com
• Beautiful and aesthetic UI
• Mobile support for UI
• Dark theme
• Autoupdates values in UI every minute
• Easy service deployment with docker
• API (see src/express/index.ts for endpoints)

EQCEU2c1HzLz5kZUfRbAoK9h4NP8sVyOaP_MRNte2bG4JYJ3

[rgabdullin]

TON Status
Real-time docker-composed monitoring service with backend, frontend and full TON node.
Efficiently collects statistics directly from TON system and stores it in database. Check demo at http://ton-status.com.

git clone https://github.com/rgabdullin/ton-monitor.git
docker-compose build
docker-compose up -d

GitHub: https://github.com/rgabdullin/ton-monitor
Last commit hash: b26768c2b2c4397e8d50a202375210dc1b315db4
Wallet: EQBSTdICWj0NZuPTjlBgHuF6zQN7nPspsQ5DhNK9d2NvDOwq

[OmaiwoHochetDeneg]

Introducing TonMonitor which was integrated into tonAdmin and upgraded with backend server.

Backend: https://github.com/Web-Rangers/ton_admin_server
Installation:

1. git clone https://github.com/Web-Rangers/ton_admin_server.git
2. npm install
3. npm start

Frontend: https://github.com/Web-Rangers/tonadmin
Installation:

1. git clone https://github.com/Web-Rangers/tonadmin.git
2. npm install
3. npm start

Page will be available at http://localhost:3000/statuspage

wallet: EQDzRLjYsmwWXJJYEnQMbfK5NZRzjimLwabZAbqoNp6C6K42

http://89.163.135.167:3001/statuspage

[maxistar]

https://github.com/maxistar/tonometer
Check Demo https://tonometer.xyz

[danieldanielecki]

https://github.com/maxistar/tonometer Check Demo https://tonometer.xyz

That's actually my favorite, just not sure if they'll like Material Design :)

[tolya-yanot]

Received 4 submissions.

Review

There is no first place in the results of this competition, because basically the works duplicate already existing functionality: https://tonmon.xyz/, https://ton.org/global-config-wallet.json (autoconfig), https://newton-blockchain.github.io/status.

However, we note that some works use an alternative implementation to collect metrics.

To get the main prize, it is not enough to simply collect existing metrics in one place and add ping of http pages.

Nevertheless, we see that the participants of the competition have dived deep enough into the TON and their work can be used to create a full-fledged TON status center.

We will contact some participants with a proposal for a continuation of the work.

@undrfined

Features:

• TPS (1/5/15 min)
• Blocks count (1/5/15 min)
• Validators count (online/total)
• Liteservers: online/offline/out of sync; response time in ms and sync state
• HTTP pages status (response time in ms, uptime in percents)
• History of HTTP pages status

Implementation:

Frontend: React

Backend: NodeJS + MongoDB

Data collection occurs by lite-client call.

Additional advantages:

• Convenient installation via Docker

Additional cons:

• The displayed data and metrics look suspicious

@rgabdullin

Features:

• TPS
• Blocks count (for masterchain and basechain) + Shardchains count
• Validators count (online/total)
• Liteservers: online/offline/out of sync; response time in ms and sync state
• HTTP pages status (response time in ms, uptime in percents)
• History of HTTP pages status
• Last block of masterchain & basechain
• Election status + Offers/Complaints
• Validators: efficiency, online, weight
• Transaction count by types

Implementation:

Frontend: React

Backend: Python + Celery + RabbitMQ + MongoDB

It installs its own full-node and full-node are used to collect data. To work with the node, the code from mytonctrl is used.

Additional advantages:

• Convenient installation via Docker

• Large number of metrics

@OmaiwoHochetDeneg

Features:

• No TPS
• No Block count

• Validators count (online/total)
• Liteservers: response time in ms
• HTTP pages status (response time in ms, uptime in percents)
• Last block of masterchain
• Election status + Offers/Complaints
• Bridge status

After the deadline, the following was done:

• History of HTTP pages status
• Validators: efficiency, online, weight

Implementation:

Frontend: React

Backend: NodeJS + mytonctrl JSON RPC API

Data is received from the mytonctrl node by json rpc api.

Additional advantages:

• Frontend design is closest to a production-ready solution (websockets are also supported)
• Made an algorithm for analyzing the history of bridge transactions (this is a new useful functionality for TON monitoring)
• All pages on http resources are covered

Additional cons:

• At the time of the deadline there was no database

@maxistar

Features:

• Mertics from tonmon.xyz
• Price of Toncoin from ton.sh. History of price
• HTTP pages status (response time in ms)

Implementation:

Frontend: React

Backend: tonmon.xys scripts + NodeJS + InfluxDB

Slightly modified tonmon.xyz scripts are used

Results

2nd place

🥈 @rgabdullin - 2000 TON
🥈 @OmaiwoHochetDeneg - 2000 TON

3rd place

🥉 @undrfined - 800 TON

Bonus prize

🎖 @maxistar - 200 TON

Second places will also receive an offer to continue work.

[tolya-yanot]

https://github.com/maxistar/tonometer Check Demo https://tonometer.xyz

Please send TON address (https://ton.org/wallets) to receive bonus prize

[maxistar]

Thank you @tolya-yanot, it was really fun to participate in the contest, it is always great getting familiar with such a cool technology! I wish you all the best, thanks for contributing to the great product! My wallet address is: EQC0wM4wqHvpswRw3Xh06vjmAj15ftAK0hH8OLtS9prx57jY