# Fast-paced Blockchains Display
**Layout Solutions for Fast-paced Blockchains Display**
Some blockchains such as Bitcoin and Bitcoin Cash have 10 minutes block intervals which means new BTC row will be added into the block explorer approximately 10 minutes after the previous btc row addition time.
In spite of this, some blockchains such as LTC (2.5 minutes),Ethereum (14 seconds) and Elrond (5 seconds) have shorter interval time. That results in dominancy for that blockchains on the explorer.
Currently we have
* BTC
* BCH
* LTC
on the explorer and LTC dominancy is observable.
Some options for visualizing this that have been suggested by Alexander Kjeldaas.
1. *Collapsing consecutive blocks from one blockchain.*
This works if there was only one blockchain that was fast, but we have several, so this would still create at a minimum 50 rows with Elrond / Ethereum / Elrond / Ethereum ... per BCH row.
* Since we have multiple fast-paced blockchains, that option is eliminated.
2. *Collapse all blocks up to 10 minutes ( the longest interval ) per blockchain.*
In such a visualization, we could move Ethereum / Elrond to the top as new blocks arrive, but they only occupy a single row.
* In such a case new LTC block arrival when there is an LTC block at the 2nd row and first row is ethereum block, LTC and Ethereum rows would be changed. If we think about Elrond and Ethereum, that may cause a lot of dynamic change on the table.
* And when we have larger number of block networks on the explorer, that table may seem as vertical columns per chain (4th option).
3. *Collapse all blocks up until one block has been issued on all active blockchains.*
This is similar to the previous one, but since block issuance is probabilistic, sometimes a new block will not appear for an hour on BTC or BCH for example, so the average number of new rows per unit time will be much lower.
* We would have the same problem as 2nd.
4. *Vertical columns per blockchain*
In this visualization, blocks are pushed down in vertical stacks on the main screen where there is one column per blockchain.
* We have 3 blockchains currently and the numbers of implemented blockchains are increasing. In order to have equally distributed table, that method seems to be a proper solution.
* We will have 1 row per chain and we can display block data (block cards and transaction table) in an outer slider for blocks when row is opened. (10 for each chain)
---
Screen display when rows are closed and opened.
* Another option is to display only last block for each chain and discard outer block slider. So the screen will be same as closed table and same as original when row will be opened.
* Additionally, we can display network specific data such as within a counter instead of block cards.
Total Block Number
Total Cweb Transactions
Total Cweb Transaction Amount
Total L1 Transactions
Total L1 Transaction Amount
* Or another option is to display both counters and cards
However that screen would increase the elements and texts in a page and that would lead to bad user experience.
---
---
---
If we will display each chain in a seperate row at the explorer, It is better to have more chain related data on the All Chains table.
In order to reveal required fields and improve the design, I've created user scenarios and checked that websites to have more inspiration.
* https://blockchair.com
* https://etherscan.io
* https://coinmarketcap.com
---
**USER SCENARIOS**
Most of the users who are using our website have blockchain knowledge and experiences. Therefore, I assume 2 possible user actors would comprise high percentage of the user scenarios.
---
* ***Blockchain User***
That user is interested in blockchain technology but doesn't have specific knowledge about coinweb.
1. As a user, I would like to search for a specific transactions by its hash and may want to see
* From and to address of searched transaction.
* Fee amount of searched transaction in blockchain currency and USD.
* Block number that contains searched transaction.
* Transaction hash of searched transaction.
* Timestamp of searched transaction.
* Value of searched transaction.
2. As a user, I would like to search for a specific transactions by its hash and may want to see
* Total Transaction number and amount of searched block.
* Timestamp of searched block.
* Height and size of searched block.
* Guessed Miner ( as in https://blockchair.com/bitcoin/blocks#f=id,hash,time,guessed_miner,transaction_count,output_total,output_total_usd,fee_total,fee_total_usd,size,chainwork ) of searched block.
3. As a user, I would like to update my market knowledge and may want to see
* Current blockchain coins prices.
* Total block and transaction number for each chain.
* Total transaction amount for each chain.
* Timestamp of last block in each chain.
* Average fees for possible chains.
* See marketcap and volume of each chain.
* Last X days blockchain data in a graph.
---
* ***Blockchain Investor***
That user is interested in blockchain technology and is looking for new technologies to invest in. He is visiting the explorer to have more knowledge about coinweb.
1. As a user, I would like to gain insights of coinweb and may want to see
* Which chains are available for coinweb .
* Total Cweb Transaction amount and number for each chain.
* More graphics to analyse better.
* Last X days Cweb Transactions per chain or overall in a graph.
* Last X days Cweb prices in a graph
* Overall coinweb transactions and amount.
---
---
**FUTURE REQUIREMENT IDEAS**
1. We can change the columns of the table for All chain and modify them according to the chain related data.
* Blocks (Total block numbers of a specified chain )
* Transactions (Total transaction numbers of a specified chain)
* Transaction Amounts (Total transaction amounts of a specified chain)
* Cweb Txs (Total Cweb transaction number that chain has)
* Cweb Tx Amount (Total Cweb transaction amount that chain has)
* Last Block (Timestamp of last block addition into the chain)
* Price of the chain token
* Average Transaction Fee
2. We can add more graphs in order to increase visulaisation of the explorer.
* Chain Token price of last X days
* Cweb Transactions of last X days
* Cweb Transaction Amount of last X days
* Cweb Price of last X days
---
All chains modified columns can be selected according to the requirements. In order to visualize it, I've selected
* Blockchain
* Blocks
* Last Block
* Cweb Transactions
* Transactions
* Price
* Last 7 days
I liked the idea of displaying graph in a row as in https://coinmarketcap.com example. Something related with cweb and chain such as coinweb Txs of last 7 days. However some of the chains such as LTC doesnt have any coinweb Txs, When every chain are using coinweb, we can implement this.
Therefore, we can display coin prices temporarily as a graph.
Since we have changed the columns according to the chain instead of a block, we should change collapse section as well.I thought that section is a nice area to display graphs and remaining chain data.
* Total Cweb Transaction Amount (currently available on be)
* Last 24h Average Tx fee
* Last 24h tps
* Marketcap
---
**ADDITIONAL STAKING REQUIREMENTS**
Staking is another area that can be interesting for the users.Users may want to see
* Total CWEB staked
* APY (Annual Percentage Yield)
* Total staked in USD
When we able to impelement web3.js and connect explorer to the user's metamask address, or somehow when we able to retrieve user's address, we can display staking data for the specific address of the user.
* Staked Cweb for the address
* Rewarded Cweb for the address
* APY (Annual Percentage Yield)
* Graph of earned Cweb
I've found some staking explorers of other blockchains for the inspiration.
* https://solflare.com
* https://explorer.cartesi.io
* https://flowscan.org/staking/overview
* https://explorer.cryptounit.cc
After looking up these websites, additional counters may be
* Total Stake Accounts
* Projected Annual Earnings
* Participation Rate
Additionally there should be a button to connect the wallet to have the data of
* Wallet Balance
* Staked Balance
Having a graph of cweb token price is a great idea as Maksym suggested on the comment section.
* Our counter number is increasing and displaying them becomes more tricky for the user experience aspect. In order to avoid highly repeated component in a screen, I've found the solution to display them in a slider. That method also would not limit the number of the counters since we need to keep the number of counters as even number to have a proper design. Slider section can be scrolled automatically without user action in order to display each counter independently.
There should be a section to display clients data via connecting their wallets. Several design ideas regarding that is discussible.
---
---
**DESIGN 1**
* *In that design, as a default, Cweb Price graph displays at top right of the page and graph currency and time controls diplay at right of the cweb graph.*
* *Connect your wallet button diplays right of the graph.*
* *Counter slider diplays below the graph and slider section displays below the counter area.*
* *After connecting client's wallet, rewarded cweb for staking in a graph displays right of the Cweb price graph. Some client counters can display at top of the Rewarded Cweb graph.*
* *Client's data section can be seperated via card.*
---
---
**DESIGN 2**
* *In that design, as a default, Cweb Price graph displays at top of the page.*
* *Connect your wallet button diplays the graph below.*
* *Cweb counters display the button below*
* *After connecting client's wallet, rewarded cweb for staking in a graph displays instead of Cweb Price graph. Graph type is written in a select button above the graph currency and time selector. User can select which graph that s/he would like to see. Client counter section can diplay left above of the graph section*
* *Additional design can be displaying graph select button instead of header. We can display several graph option for the user on that button such as*
1. Rewarded Cweb
2. Staked Cweb
3. Transacted Cweb
4. Cweb Price
...
*Client counters can be display on top of the page and above the graph*
*We can seperate the client counter section via card*
---
---
**DESIGN 3**
* *In that design, as a default, Cweb counters display at top of the page and in a slider.*
* *Cweb Price graph displays below.*
* *Connect your wallet button displays the graph below.*
* *After connecting client's wallet, client data counters can display the graph below.*
* *Graph header is selectable.*
* *Additionally, we can diplay the slider vertically instead of horizontal since our layout is more vertical.*
---
---
**DESIGN 4**
* *In that design, as a default, vertical counters display at top of the page.*
* *Cweb Price graph displays left below and header is selectable. We can display different graphs in that graph area*
* *Connect Your Wallet button displays right below.*
* *After connecting client's wallet, client data counters can display right of the graph.*
* Additionally, client's wallet balance and stake balance can display in a seperate counter.
*We can seperate the client counter section via card*
---
---
---
---
**BACKEND REQUIREMENTS**
According to new design, we have additional counters, graphs and client's wallet data.
Finally the counters that we will have
1. Coinweb Transactions - Total coinweb Tx number
2. Layer 1 Transactions - Total tx numbers of the chains
3. Coinweb Stable Token Issued - Total Coinweb stake amount in USD
4. Available Networks - Total network numbers
5. Rewarded Cweb - Total Rewarded cweb amount for staking
6. Staked Cweb - Total Staked cweb amount
7. Rewarded Cweb in USD - Total Rewarded cweb amount for staking in USD
8. Staked Cweb in USD - Total Staked cweb amount in USD
9. APY - Annual Percenatge Yield of Staking
10. Stake Accounts - Total Stake Account number
11. Participation Rate
We will have 1 day, 7 day, 1 month and 3 month time interval selection. Those can be rearranged according to the requirements. Global graphs that we will have
1. Cweb Price
2. Cweb Tx Amount
3. Cweb Tx number
4. Staked Cweb
5. Rewarded Cweb
Additionally, we can add currency options for the price graphs such as USD, Cweb, BTC etc.
When we connect the explorer to clients wallet account,
the counters we might have
1. Staked Cweb in USD
2. Rewarded Cweb
3. APY
4. Staked Cweb
5. Rewarded Cweb in USD
we should select 4 of those.
Clients graphs will be
1. Rewarded Cweb
2. Staked Cweb
We can display clients wallet balance and staked cweb amounts in another counter section.
We have new table for the all chain and new columns are
* Blockchain
* Last Block time
* Cweb Tx number
* Tx number
* Price
* Last 7 days
We also have new chain counters which are
* MarketCap
* Avg Tx Fee (might be last 24h)
* Tps (24h)
* Cweb Tx amount
Therefore, new backend api's should be
* Total Rewarded Cweb amount and number for each network in USD and also for last 1d, 7d, 1m and 3m.
* Total Staked Cweb amount and number for each network in USD and also for last 1d, 7d, 1m and 3m.
* Staking APY
* Total Cweb Stake Accounts
* Staking Participation Rate
* Cweb Price data (graph)for last 1d, 7d, 1m and 3m.
* Cweb Tx Amount for each chain of last 1d, 7d, 1m and 3m.
* Cweb Tx Number for each chain of last 1d, 7d, 1m and 3m.
For the client's wallet we will need
* Wallet balance
* Staked cweb amount and number of last 1d, 7d, 1m and 3m in distinct currencies.
* Rewarded cweb amount and number of last 1d, 7d, 1m and 3m in distinct currencies.
* Current staked cweb of the wallet
For the new headers
* MarketCaps of the network
* Current price of the networks coin.
* TPS (24h) of the network
```
type GraphData{
time: Int!
data: Float!
}
type Network {
totalNumberOfCwebTxs: Int!
totalNumberOfL1Txs: Int!
totalNumberOfBlocks: Int!
totalAmountTransactedL1New: AmountQGL!
totalAmountTransactedCweb(...): Float!
price: Float! (current price of network token)
last7price: [GraphData]! (last 7 days price of network token)
last7cwebTxs: [GraphData]! (last 7 days cweb Tx number of network)
last7cwebTx: [GraphData]! (last 7 days cweb Tx amount of network)
marketCap: Int! (marketcap of network token)
24hTPS: Int! (24 h Avg tps of network token)
AvgTxFee: Int! (Avg txfee of network token -> maybe 24h)
lastBlocks(...): [Block!]!
}
type Stake {
totalNumberOfStakeUSD: Int! (total Staked cweb amount in USD)
totalNumberOfRewardUSD: Int! (total rewarded cweb amount in USD)
totalNumberOfStake: Int! (total staked cweb number)
totalNumberOfReward: Int! (total rewarded cweb number)
totalNumberOfStakeAccount: Int! (total stake account number)
APY: Float! (Cweb Stake APY )
totalNumberOfStakeAccount: Int! (total stake account number)
participationRate: Float! (staking participation rate)
rewardedCweb(interval: Int! = 1, denomination: denomination! = USD): [GraphData]! (rewarded cweb amount graphdata, params interval= last Xdays , denomination: currency)
stakedCweb(interval: Int! = 1, denomination: denomination! = USD): [GraphData]! (staked cweb amount graphdata, params interval= last Xdays , denomination: currency)
rewardedCwebNum(interval: Int! = 1): [GraphData]! (rewarded cweb number graphdata)
stakedCwebNum(interval: Int! = 1): [GraphData]! (staked cweb number graphdata)
}
query price($interval: Int!, $denomination: denomination! = USD) {
price( interval: $interval,denomination: $denomination ) {
time
data
}
}
}
```
Sign in with Wallet
Connect another wallet