Feat/blocklist

[BLuEScioN]

Implements the new designs for the grouped and ungrouped block list widgets on the home page and blocks page.
Figma - https://www.figma.com/file/31q1g27k69z1yXb6r6vrRD/Stacks-Explorer-Working-File?node-id=7090%3A101311&mode=dev

Also adds the new btc blocks page
Figma - https://www.figma.com/file/31q1g27k69z1yXb6r6vrRD/Stacks-Explorer-Working-File?node-id=7199%3A100786&mode=dev
The new background for the btc blocks page will go in a separate PR

Keeps the new UI hidden behind the api=https://api.nakamoto-1.hiro.so query param
Keeps the UI we have today, but we can also switch those out for the previous naka-1 blocklist widgets easily.

@eugeniadigon there were a lot of new colors used. I added a TODO in this PR to add them to the theme. Can you please take a look and see what's the best way to integrate them with the current theme we have.

Data missing:

• Average Stacks Block Time
  Task Need to be able to get the average block time from the API stacks-blockchain-api#1919
  
• Average Stacks Block Time per Burn Block
  Task Need to be able to get the average block time from the API stacks-blockchain-api#1919
  
  
• Total Stacks transactions included (in a burn block)
  This data needs to be included in the burn block data. Otherwise, I need to query for each stx block in a burn block. And that would mean removing the load more button at the bottom of the page and potentially making a lot of queries.
  

Data Issues:

• Block time
  It seems like the block time is just set to the burn block time. All the timestamps are the same
  Here is the API PR that adds block time feat: add nakamoto block time to v2 endpoints stacks-blockchain-api#1921
  

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hiro-explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2024 8:37pm

[He1DAr]

Could you please fix this?

[BLuEScioN]

I do not want to fix this in this PR. The PR is already too much. But I think we can leave the comment to fix later.

[andresgalante]

Hi Nick, thanks for this PR! I was looking forward to reviewing it. I have a couple of questions:

• Can we preview the block list with data (epoch 3)?

• Why are we changing the testnet 2.5 views with this one? We decided to keep the current one and only replace it with this one once we reach 3.0. This view should be a hidden link to test.

A couple of things I noticed on the UI:

• The responsive table shows a few pixels to the left of the vertical line

• The block hash goes outside the box

• There is a regression, the dropmenu is broken on small viewports

• Why is there so much space to the right of the list item?

Please make sure to swash the commits and rebase 🙏

[BLuEScioN]

Hi Nick, thanks for this PR! I was looking forward to reviewing it. I have a couple of questions:

• Can we preview the block list with data (epoch 3)?
  Yes just add ?chain=testnet&api=https://api.nakamoto-1.hiro.so to the query parameter section of the url

• Why are we changing the testnet 2.5 views with this one? We decided to keep the current one and only replace it with this one once we reach 3.0. This view should be a hidden link to test.

A couple of things I noticed on the UI:

• The responsive table shows a few pixels to the left of the vertical line
  I don't see this so I think it is fixed

* The block hash goes outside the box

Fixed

* There is a regression, the dropmenu is broken on small viewports

Fixed. The backgroundground color had not been updated to the new semantic tokens

* Why is there so much space to the right of the list item?

Fixed

Please make sure to swash the commits and rebase 🙏

I am going to do a squash merge commit

[codecov]

Codecov Report

Attention: Patch coverage is 20.13752% with 813 lines in your changes are missing coverage. Please review.

Project coverage is 20.84%. Comparing base (bf15dc0) to head (830ccbc).
Report is 6 commits behind head on main.

Files	Patch %	Lines
src/app/_components/BlockList/utils.ts	19.64%	42 Missing and 3 partials ⚠️
...s/BlockList/data/useBlocksPageBlockListGrouped.tsx	0.00%	42 Missing and 2 partials ⚠️
.../BlockList/data/useBlocksPageBlockListUngrouped.ts	0.00%	42 Missing and 2 partials ⚠️
..._components/BlockList/data/useHomePageBlockList.ts	0.00%	42 Missing and 2 partials ⚠️
...ponents/BlockList/Ungrouped/BlockListUngrouped.tsx	32.81%	43 Missing ⚠️
..._components/BlockList/Grouped/BlockListGrouped.tsx	35.38%	42 Missing ⚠️
src/app/_components/BlockList/Grouped/skeleton.tsx	35.55%	29 Missing ⚠️
...ist/data/useBlocksPageUngroupedInitialBlockList.ts	0.00%	29 Missing ⚠️
...omponents/BlockList/HomePage/HomePageBlockList.tsx	0.00%	27 Missing and 1 partial ⚠️
...ents/BlockList/data/useHomePageInitialBlockList.ts	0.00%	27 Missing and 1 partial ⚠️
... and 42 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1569      +/-   ##
==========================================
- Coverage   21.11%   20.84%   -0.27%     
==========================================
  Files         417      447      +30     
  Lines        6764     7590     +826     
  Branches     1439     1590     +151     
==========================================
+ Hits         1428     1582     +154     
- Misses       5146     5802     +656     
- Partials      190      206      +16     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[He1DAr]

would you mind fixing this key error?

[He1DAr]

could you remove the console logs?

[BLuEScioN]

would you mind fixing this key error?

done

[BLuEScioN]

could you remove the console logs?

done

[blockstack-devops]

🎉 This PR is included in version 1.169.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀