**Frontend Design Ideas and Research outputs**
---
**Requirements:**
-should have some “counter” thing that counts new things happening such as coinweb txs.
-should allow to the user to look up l2 and l1 txids (probably same search input element)
-show blocks as they appear and coinweb txs
-(optional) show/hide specific l1 blockchains (which will hide their corresponding l2 (coinweb) txs)
**To be discussed:**
-Which column informations do we need to display on the counter
-Which time options to display such as
-1 day
-1 week
-1 month
Color Schema:
Colour 1:#d3d3ef
Colour 2:#4f4f72
Colour 3:#1f1d47
Colour 4:#00c3ff
Gradient 1:linear-gradient(to bottom right, #07f6fe, #067cfb)
Gradient 2:linear-gradient(to bottom right, #07f6fe, #067cfb)
---
**Possible React js Libraries**
| Name | Pros | Cons | Doc Link |
| --------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| Material UI | Used in well known tech firms such as netflix spotify etc.Variety of components. Unstyled options for some components.It has templates and might be useful for design ideas https://material-ui.com/store/#populars export option in the table components (might be good for counter table etc).has its own icons. smaller bundle size than ant design | -There might be some paid components-found some blog post that it is slow.https://dev.to/gaelferrand/why-you-should-not-use-material-ui-21nn | https://mui.com |
| React-Bootstrap | mid-variety of components.ability to new variants and sizes. | there might not be enough tool for future requirements https://react-bootstrap.github.io | https://react-bootstrap.github.io |
| grommet | | -limited style options | https://v2.grommet.io |
| Ant Design | component variety is sufficient. has similar icons. ability to style. strong validation system for form components.|bundle is quite big compared to others libraries | https://ant.design |
---
**DESIGN EXPLORER**
**1. https://thegraph.com/explorer/network**
-It shows epoch in a card
-total 5 card, 1 includes active epoch, 4 previous epochs
Active Card includes
* Epoch Num
* Time Left
* Start Block
* End Block
* Query Fees
* Indexing Rewards
* Setteling Card includes
* Epoch Num
* Block Range
* Query Fees
* Indexing Rewards
* Time
-Epoch table columns are
* Epoch -> Epoch number
* Status -> Active/Settling
* Start Block
* End Block
* Query Fees
* Indexing Reward
**2. https://blockstream.info**
For Bitcoin,
* Height
* Timestamp
* Transaction
* Size(KB)
* Weight(KWU)
**3. https://blockchain.coinmarketcap.com/chain/bitcoin**
There is a graph that shows transactions per block
There is a card that includes the information about Blockchain and Market Data
**Blockchain Data**
* Block Height
* TPS(24h)
* Hashrate
* Total txs
* Pending txs
* Difficulty
**Market Data**
* Price
* Volume (24 hrs)
* Circulating Supply
* Market Cap
* BTC Dominance
* Max Supply
There is a table for block and transactions
**Block Table includes **
* Block Height
* Amount Transacted
* Created By
* Hash ID
* Transactions
* Date & Time
* Transaction Table includes
* Hash ID
* Amount Transacted
* Fees
* Date & Time
**4. https://live.blockcypher.com/btc/**
There is a table for recent Blocks,
* Height
* Age
* Transactions
* Total Sent
* Total Fees
* Block Size (in bytes)
There is another table for latest Transactions,
* Transaction Hash
* BTC
* Time
* Miner Preference
**5. https://blockchair.com/bitcoin**
There is a table for latest blocks
* Height
* Hash
* Mined on
* Output Total
* Miner
* Hash
* Output
* Time
**Transaction explorer**
* Hash
* Block
* Input count
* Output count
* Time(UTC)
* Output(BCH)
https://blockchair.com/bitcoin-cash/transactions?q=time(2021-09-30%2008:22:20..2021-10-01%2008:22:20)&s=output_total(desc)&limit=20
***There is a table field that can be selected for the appearance of the table***
**Block explorer**
* Hash
* Block
* Input count
* Output count
* Time(UTC)
* Output(BCH)
https://blockchair.com/bitcoin-cash/blocks?#f=id,time,hash,guessed_miner,transaction_count,input_count
***There is a table field that can be selected for the appearance of the table***
**In short**
| 1 | 2 | 3 | 4 | 5 |
| --- | ---- | ---- | --- | --- |
| Epoch |Height | Block Height | Height | Height |
| Status | TimeStamp |Amount Transacted | Age | Hash |
| Start Block | Transactions |Created By | Transactions | Time(UTC)
End Block | Size(kb) | Hash ID | Total Sent | Miner | | |
| Query Fees | Weight (KWU) | Transactions | Total Fees | Transaction Count |
| Indexing Reward | | Date & time | Block Size (in bytes) | Output (BTC) |
| | | | | Output (USD) |
| | | | | Fee(BTC) |
| | | | | Fee(USD) |
| | | | | Size(Kb) |
| | | | | Input Count |
| | | | | Output Count |
| | | | | Input (2 opt for both USd and BTC) |
| | | | | Fee per kb (2 opt for both USd and BTC) |
| | | | | Weight |
| | | | | Version (int Hex Bits) |
| | | | | Merkle Root |
| | | | | Nonce |
| | | | | Bits |
| | | | | Difficulty |
| | | | | Chainwork |
---
---
**Summary**
* Table columns should be selectable from a drawer
* Required columns should have various unit options
* Some columns should be sortable
* Default selected columns should be
1. Height
2. Transactions
3. TimeStamp(might be selectable timezone)
4. Size
5. Amount Transacted
* Extra column options should be (drawer)
1. Height
2. Transactions
3. TimeStamp(might be selectable timezone)
4. Size (kb)
5. Amount Transacted (BTC USD)
6. Hash Id
7. Nonce
8. Miner
9. Fee (BTC USD)
10. Fee per kB (BTC USD)
11. Fee per kWU (BTC USD)
12. Reward (BTC USD)
13. Merkle Root
14. Difficulty
15. Version (int hex bits)
16. Weight
17. Witness tx count
---
---
**Useful links to embed react js components into wordpress**
---
https://medium.com/@isachenx/how-does-wordpress-and-react-work-together-d0440051d4f5
https://javascriptforwp.com/adding-react-to-a-wordpress-theme-tutorial/
https://stackoverflow.com/questions/44026644/react-on-existing-wordpress-site
https://medium.com/@CodeCareerCoach/react-app-inside-a-wordpress-page-or-post-4c7d38181b3d
https://snipcart.com/blog/reactjs-wordpress-rest-api-example
https://javascriptforwp.com/adding-react-to-a-wordpress-theme-tutorial/
http://michaelsoriano.com/wordpress-theme-react-part-1-setup/
https://pretagteam.com/question/how-to-embed-existing-react-app-to-wordpress
https://mikhailroot.ru/react-app-embedded-into-wordpress-page/
https://dev.to/julbrs/how-to-use-react-inside-a-wordpress-application-49i
---
**Data Element Specification**
According to the current backend API block data will be
* There will be counter to show coinweb TPS
* There will be card to show the data of last added blocks. When a row on the block table is clicked, that block data can be display in that card (discuss), initial data
1. Height
2. Transactions (count)
3. TimeStamp(might be selectable timezone)
4. Size
5. Amount Transacted
6. Block Hash
**(additional data)**
7. Miner
8. Merkle Root
9. Fee (BTC USD)
10. Version
* There will be a card to display the l1 transactions in the selected block (default one will be last one), tx data will be
1. Tx Hash
2. Input Count
3. Output count
4. tx time
5. Fee
* There will be a card to display the l2 coinweb transactions in the selected block (default one will be last one), tx data will be
1. Tx Hash
2. Input Count
3. Output count
4. tx time
5. Fee
6. ??Miner Preference(low mid high)
* There will be table to show the block overall l1 and l2 tx data (there might be additional columns to be selected via filter)
**default ones will be**
1. Height
2. Transactions (count)
3. TimeStamp(might be selectable timezone)
4. Size
5. Amount Transacted
6. Block Hash
---
**selective ones will be**
1. Miner
2. Merkle Root
3. Fee (BTC USD)
4. Version
Sign in with Wallet
Connect another wallet