Implement new homepage

[buberdds]

Closes #2238.

Extracted PRs:

• Align Social component with new designs #2313
• Update API bindings  #2344
• Add recent blocks components #2345
• Create ecosystem components for homepage #2346

[github-actions]

Deployed to Cloudflare Pages

Latest commit:	a214ecc289ac2be99c725881ea94650516644cae
Status:	✅ Deploy successful!
Preview URL:	https://2605c246.oasis-explorer.pages.dev
Alias:	https://pr-2302.oasis-explorer.pages.dev

[tjanez]

@buberdds, thanks for working on this.

A few quick to implement suggestions (cc @juresobocan):

1. Can we make a lot more things in the Ecosystem cards clickable?
   I think users would try to click on all the blue things and would be a bit disappointed to see that clicking on e.g. block number doesn't take them to that block's details page.
   The things I would make clickable:

   • Block number (e.g. 27,343,283) on all 4 cards
   • Active nodes number (e.g. 105) on all 4 cards. I'm unsure if we currently have a page to show the node operators that run Sapphire or Emerald? But for Consensus that should be there.
   • Name of the chain (e.g. Sapphire, Consensus). I find it most intuitive that people would expect to click on the heading (or whole first row) to be able to navigate to the chosen chain.

2. I find the "deltaDao" in italics a bit awkward:
   
   Can we try with non-italic variant?

3. I find the main action item on each card, i.e. the "Mainnet ->" button, getting lost in the gray background and would not recognize it as clickable/actionable at first sight:
   
   Can we make it similarly prominent as e.g. action items in the ROFL App?

4. We need to provide better copy for all 4 chains' descriptions. I can help with those.

5. I find the "Online" and "Legacy" badges a bit contradictory:
   
   The original aim was to let users know that we consider Emerald as the Legacy EVM-compatible ParaTime/chain but currently, looking at the above picture, one would think all other 3 are running and Emerald is perhaps down?

   We could replace the word "Online" with "Current" (or similar) so we message a consistent thing: some chains are considered current (i.e. people should develop and deploy new things on them) and some chains are considered legacy (i.e. they are still being run, but we expect developers and dApps to migrate from these chains to a newer chain).

   Also, is the current "orange" color good for signaling something legacy? I think we used this color to denote an experimental development build of e.g. ROFL App. And I think orange fits well in this sense. Can we try with some other color for legacy things?

[juresobocan]

1. Yes, we can. Clickable text is shown as underlined text.
2. This is fixed.
3. I think we need to add an additional tertiary button. White background for dark theme and dark background for white theme. This would solve the problem.
4. /
5. I would not show online/current or anything similar. Just labelling Emerald as something different would normalise the first three. Green dots next to it to show it is online, running, stable,... would also help as an additional indicator.

[buberdds]

for # 5
Currently

• there is one hardcoded legacy status for Emerald
• other badges indicate indexing status (just like in old homepage): Online (success color) or Out-of-date (destructive color) when Indexing is lagging

[tjanez]

@buberdds, thanks for implementing the changes. A few comments:

1. Making things clickable:

   • Could you make the block number links go to the exact block number?
     It would match the behavior of clicking on the block number in the Latest Blocks table.
   • Can we make at least the Active nodes number for the Consensus clickable and link to https://explorer.dev.oasis.io/mainnet/consensus/validators?
     For the ParaTimes, I think we currently don't have a view of nodes that run a particular ParaTime. We'll need to wait for [UX]: Add ability to see which node operators run Sapphire (or any other ParaTime) #2153 before we can link there.

2. Pontus-X link appears to not function correctly:

   Oasis.Explorer.-.Pontus-X.link.not.working.correctly.mp4

   At the bottom, the link says it will go to https://www.pontus-x.eu/, but it goes to https://explorer.oasis.io/testnet/pontusxtest.

3. Can we implement a quick-fix interim solution to make the buttons have the same style as the Search button next to the search bar above?

   

   This should make them visible enough for the time being and we could move forward with the new home page.

4. My copy suggestions for the chain cards:

   • Sapphire: "Oasis main EVM-compatible chain. Supports encrypted contract state and end-to-end encrypted transactions and calls."
   • Consensus: "Oasis Layer 1 chain providing scalable, high-throughput, secure, proof-of-stake consensus run by a decentralized set of validator nodes."
   • Pontus-X by deltaDAO: "Confidential EVM-Compatible chain offering smart contract development environment focused on building Decentralized data economy. (Mainnet coming soon)"
   • Emerald: "Oasis original EVM-compatible chain launched in 2021. Superseded by Oasis Sapphire which supports confidential state and encrypted transactions."
   

5. Chain status badges

   For # 5 currently

   there is one hardcoded legacy status for Emerald
   other badges indicate indexing status (just like in old homepage): Online (success color) or Out-of-date
   (destructive color) when Indexing is lagging

   @buberdds, thanks for explaining this!

   @juresobocan, can we keep the "normal" status badge for Emerald then (i.e. it would show green/online or red/out-of-date) and add a legacy icon next to the name similar to how "by deltaDAO" is added to Pontus-X?

   Upon hovering over the legacy icon, we would explain that Emerald is considered a legacy chain and what that entails.