ergoplatform / explorer-frontend

ERGO Explorer

This repository contains browser for viewing activity on the underlying blockchain network.

Code style

TypeScript

For typescript code style standards we use TSLint

CSS

We use CSS Comb to format SCSS code in project.

To have it in JetBrains WebStorm follow next instructions

1. Go to Preferences > External Tools (or press ⌘, on Mac)
2. Click on Add icon (or press ⌘N on Mac)
3. Fill the form with following info:
   • Name: CSS Comb
   • Program: $ProjectFileDir$/node_modules/.bin/csscomb
   • Parameters: $FilePath$ -t
   • Working directory: $FileDir$

Custom config

To pass custom variables put to /config/ app.config.js

Where app.config.js is a JavaScript file containing next content:

var __APP_CONFIG__ = {
  apiUrl: 'http://custom.apiserver',
  apiBaseUrl: 'http://custom.apiserver', // for v1 api version
  alternativeLogo: true, // true by default
  environments: [
     {
       name: 'Testnet',
       url: 'http://custom.explorerUrl',
     }
   ],
};

if (typeof global !== 'undefined') {
  global.__APP_CONFIG__ = __APP_CONFIG__;
}

Translations

In order to translate project files use i18n-editor. Download latest stable release and open Project located in client/src/locales

explorer-frontend's Issues

What about NFTs in explorer?

Show costs for blocks, transactions, and inputs.

For each input, the total cost of that input should be shown.

For each transaction, the total cost should be shown and then a breakdown:

• input costs as above
• initialisation cost

The total cost for a whole block should also be shown.

Need to add search field into issued tokens page

Total Received shows wrong amount

Transactions section "Total Received" is the sum of the received amounts and the balance value from the sent amounts combined. This is unexpected behavior.
https://explorer.ergoplatform.com/en/addresses/9enyYkKLkhhN5ePWFWfQ149ezZ6CNLitnntEK11b5AUbauZL1K9

bookmarks

Link to

http://cds.oette.info/ergo_diff.htm
https://ergo.watch/

in sidebar

Add mining difficulty page

Ref

Interface is broke after click on transactions count/miner reward on the `/` page

DEX Order Book page

Originally described in ergoplatform/ergo-tool#26

Motivation

Command to show current order book for a given token, i.e. a table with Sell and Buy orders by price.
So that all sell orders are above all buy orders.

UPDATE:
The order book is pretty standard thing, you can look at any exchange. The buy and sell orders should be ordered by Token Price.
The Token Price, however, you need to compute yourself, because the orders contain Token Amount and Erg Amount only so TokenPrice = ErgAmount / TokenAmount
Thus one can sell 1 token for 100 erg so the TokenPrice = 100/1
or he can buy 100 tokens for 1000 ergs co TokenPrice = 1000 / 100
So this two orders should be sorted accordingly based on price.
The computation should take into account "Number of decimals" from EIP-4

Parameters

• token id;

NEW Implementation

New API calls are implemented in new explorer backend ergoplatform/explorer-backend#14 according to the implementation below.

Implementation

1. Fetch all unspent sell and buy order contracts(boxes) with Appkit's BlockchainContext.getUnspentBoxesForErgoTreeTemplate

(or at transactions/boxes/byErgoTreeTemplate/unspent/{ergoTreeTemplate})
This API call was added in ergoplatform/explorer-back#230
Use the following template bytes:

• eb027300d1eded91b1a57301e6c6b2a5730200040ed801d60193e4c6b2a5730300040ec5a7eded92c1b2a57304007305720193c2b2a5730600d07307 for sell order;
• eb027300d1eded91b1a57301e6c6b2a5730200040ed803d601e4c6b2a5730300020c4d0ed602eded91b172017304938cb27201730500017306928cb27201730700027308d60393e4c6b2a5730900040ec5a7eded720293c2b2a5730a00d0730b7203 for buy orders;

Both are generated by SellerContract.contractTemplate and
BuyerContract.contractTemplate which use contracts from fv sigma branch - src.
Keep in mind that these contracts will be changed soon due to ergoplatform/ergo-tool#30

2. Filter fetched contracts(boxes) by token id.

• Sell order box should have token id and amount in box.tokens and token price encoded in its contract. Token price should be in ErgoTree.constants(5).
• Buy order box should have token id and amount encoded in the contract and token price in box.value. Token id should be in ErgoTree.constants(6) and the token amount should be in ErgoTree.constants(8).

Expect these places to change with a new contract to be introduced in ergoplatform/ergo-tool#30

3. Get token name by token id

Should be done as Coinbarn does at https://github.com/coinbarn/ergo-ts/blob/80551350e882585f7c24ce642e9bc750badc76a3/src/explorer.ts#L64
or easier after ergoplatform/explorer-back#232 is done.

Not have charts preview images

Spent/Unspent colors

Switch colors: Spent should be red, Unspent should be green

Wrong number of transactions in the UI

https://api.ergoplatform.com/addresses/88dhgzEuTXaQGZRVyScShCr7Fgd9FWCtDbnCpNgGdL1WommGHhDE2XgMDJ2xYSEFY2HR41jKXhJPGJmU/transactions

shows 157

while

https://explorer.ergoplatform.com/en/addresses/88dhgzEuTXaQGZRVyScShCr7Fgd9FWCtDbnCpNgGdL1WommGHhDE2XgMDJ2xYSEFY2HR41jKXhJPGJmU

shows 158

probably because of orphaned blocks?

DEX Issued Token page

Originally described in ergoplatform/ergo-tool#25

Motivation

Issued token is a special box created according to EIP-4.
In order to buy existing token one needs to find it's id.
Thus we need a command which:

1. list all issued tokens (respecting --limit-list option)
2. filter tokens by name (R4 register)
3. Output table with columns (name, id, amount, decimals, description)

Implementation notes.

Box that issued a token with token id can be fetched with assets/[token id]/issuingBox call.
Check details at https://github.com/ergoplatform/explorer-backend/blob/rest-api/modules/explorer-api/src/main/scala/org/ergoplatform/explorer/http/api/v0/defs/AssetsEndpointDefs.scala

Incorrect transaction display in UI

https://explorer.ergoplatform.com/en/blocks/3a6b6ec23aa177d4b0d9973f270e00901b50e903891d0281cb8b405da64516a9/transactions

Transaction ID f682d38638011475accf6e98ec2734a5cda8b159e0d00d994adc2404de6baa53 has duplicated outputs. Clicking on the transaction ID results in an error.

Add search by tokenId or tokenName

Expand Rich List

Currently Rich List shows only 100 Top Holder.

Proposal: could this list be expanded with more holders?

Add github link to the footer

Sometimes it is useful to add new issues)

Need to migrate from v0 to v1 uncofirmed transactions.

from: https://api.ergoplatform.com/api/v0/transactions/unconfirmed/byAddress/{p1}
to: https://api.ergoplatform.com/api/v1/mempool/transactions/byAddress/{p1}

'ERROR: bigint out of range' when viewing no.1 from rich list

When viewing the number 1 from the rich list, the server responds with Unknown error: ERROR: bigint out of range, resulting in de Explorer infinitely showing the message 'Fetching data...'. Over on Discord @oskin1 said it's simply a matter of updating the frontend to call the v1 api, which does not have this issue.

The rich list page:
https://explorer.ergoplatform.com/en/addresses/9fPiW45mZwoTxSwTLLXaZcdekqi72emebENmScyTGsjryzrntUe

Underlying api call (with error):
https://api.ergoplatform.com/addresses/9fPiW45mZwoTxSwTLLXaZcdekqi72emebENmScyTGsjryzrntUe

Display block epoch at block page

Rich-list labelling

Annotate rich-list to make it easier to navigate.

annotated version here: https://docs.google.com/spreadsheets/d/19DlP1nWFvB_LCCsBVC4ryuy--QtlztPQ5cNGuaj2BlI/edit#gid=1181839735

Migrate transaction page to v1 api to see the tokens in inputs.

Show context extensions for transaction inputs.

An example of a transaction which input has context extensions: https://www.ergoforum.org/t/mathematical-fun-with-ergoscript/76/4 .

Mobile sidebar Rich List overlap

While viewing the Rich List on mobile, the main window's text covers the sidebar. See attached.

Fix display of bigints

BigInts are now rounded when parsing from JSON

Add interval timer for updates on new main page

Data on new main page is loaded only for first render. Need to add interval timer for update this data after some time.

Provide an EIP-25 payment request link on payment request page

Payment requests like this one should provide a clickable ergo:... link as described in EIP-25.

Display tickers for EIP4 tokens

Timestamp ...

Year of timestamp field is missed, while there is quite a lot of free space

Caught wrong response from back and stop operates

Motivation

With last uptime 8 days, ergo-explorer stop answering the queries and start constantly generate errors:

[09/10/2019 16:45:36.667] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:04.743] [ERROR]  Data page: Block api service. Request: https://api.ergoplatform.com/blocks. Response: undefined
[09/10/2019 16:46:04.743] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/94ce2fe0aca725e0afa9b11add98ecf0e3de15bb704f1881d19a793ae27b08e0. Response: undefined
[09/10/2019 16:46:04.743] [ERROR]  Block page: Block api service. Request: https://api.ergoplatform.com/blocks/96fea4b18cac5432852716b04fe39ec97b138a0433e0cecf9f8d8adb463c752d. Response: undefined
[09/10/2019 16:46:04.744] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:04.744] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:04.745] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:27.253] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/114785f4076a117fcc820844080530264101f5138ca5d4cfa173b1a8044e9ac4. Response: undefined
[09/10/2019 16:46:27.253] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/d086ef8b6b996405314f16aff4aab8e6f6af6b2f821fcc14ca7717e064ccf590. Response: undefined
[09/10/2019 16:46:27.254] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:50.472] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/94e8a73d76d1415921c27bb5f7085ce20b2ed976577b5c6fd712f27b1fdabebc. Response: undefined
[09/10/2019 16:46:50.472] [ERROR]  Block page: Block api service. Request: https://api.ergoplatform.com/blocks/9750c01f17fe9285e9640531c6ff58fb1311dc79d078854989f1aa729b9aa008. Response: undefined
[09/10/2019 16:46:50.474] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/115408db5c70dbc4ba6e6b88f8777c1da3a2613237fbc0065e3f4efac3c57d97. Response: undefined
[09/10/2019 16:46:50.475] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:46:50.477] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:47:13.216] [ERROR]  Transaction page: Transaction api service. Request: https://api.ergoplatform.com/transactions/9503171ff96a5fc7402692c265bd583a0c3a58e8083c21aa6ac555628df4b469. Response: undefined
[09/10/2019 16:47:13.216] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:47:13.217] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined
[09/10/2019 16:47:13.217] [ERROR]  Preloader tsx: Stats api service. Request: https://api.ergoplatform.com/info. Response: undefined

Explorer backend was operating normally when this happens.

Expected result

Explorer frontend works without degradation.

Extra info

See slack

Use dedicated API method to obtain issued tokens

https://api.ergoplatform.com/api/v1/assets

API method for total supply

Please provide an API method with circulating total supply as numerical value, and just this value
Example: http://chainz.cryptoid.info/grs/api.dws?q=totalcoins

required for CMC.

Sorting to transaction page

Would be good to be able to see summaries/sort things like

• Total received (accounting for UTXO)
• Total sent
• Incoming transactions
• Outgoing transactions
• Sort by size
• Sort by date

etc

Timezone slow change

When I load main page i first see page with UTC time

That changes to my local time after some time

Search dont work

test string = 3WxxVQqxoVSWEKG5B73eNttBX51ZZ6WXLW7fiVDgCFhzRK8R4gmk

Need to migrate from v0 to v1 version in address page.

https://api.ergoplatform.com/api/v1/docs/#operation/getApiV1AddressesP1BalanceTotal
https://api.ergoplatform.com/api/v1/docs/#operation/getApiV1AddressesP1Transactions

Scroll to top on page change

Migrate to AddressesAPIv1

The current AddressSummary page hangs on heavy requests:
https://explorer.ergoplatform.com/en/addresses/9fPiW45mZwoTxSwTLLXaZcdekqi72emebENmScyTGsjryzrntUe

This should be helpful:

https://api.ergoplatform.com/api/v1/docs/#operation/getApiV1AddressesP1BalanceConfirmed

Add search by tokens into header search

Improve Error Message

If a user attempts to transfer from gate.io, the transaction goes into one state -- it might have been 'waiting' -- and then to 'pending.' If the user clicks through they see this message:

Transaction with this ID was not found, or it has not entered Mempool yet

It would be much better if it said something like, "Your transaction has been initiated, but has not yet entered the Mempool, this is normal for this stage of the transaction. More data will be available when a Transaction ID is assigned."

Slow charts

Charts page shows nothing for a long time, when you are a first user on this page after some delay.
This is quite negative user experience, I think it would be correct to schedule this images updates on our server, like update them every 10 minutes and show latest version to users.

Unhandled error displaying on 404 server response

https://testnet.ergoplatform.com/en/addresses/<address> displays "Unhandled error" on 404 server response.

Checking tokens by ID

Necessary to prevent fraud due to duplicate tickers

Add to main page

Let's add few fields to main page:
Reward - reward, earned by miner
Difficulty - block difficulty.

Collapsing mobile sidebar

When mobile sidebar is opened, you can only collapse it by clicking the X. Clicking outside of the menu or clicking a link could also close it.

Need to add sorting on mempool page

Bug with Ad Proofs button

There is probably a bug with the button 'Ad Proofs' here: https://explorer.ergoplatform.com/en/blocks/c8f4a8b1beba6e0b919bdddc5b165596bd9c9d86ca64fca4f7888f9c842fa825 . Safari freezes for a short amount of time and after it restarts the page.

Hide tx addresses on explorer

One tx can have many addresses need to hide if addresses more than 5

Test running explorer node.js under GraalVM

Motivation

Mostly to use Appkit API, work with ErgoTree and other data formats in the most easy and natural way.
Performance is not a goal/issue.

fix hash rate pie

https://www.reddit.com/r/ergonauts/comments/s6mp7j/improving_the_ergo_explorer_website/

Implement EIP-0021 Genuine tokens verification

Hardcoded list works would work for now, should be done via API.

See

ergoplatform/eips#38