Added Restaking page in usecases

public/content/restaking/index.md

@@ -0,0 +1,188 @@
+---
+title: Restaking
+metaTitle: What is restaking? | Benefits and use of restaking
+description: Use staked ETH to secure other decentralized services and earn extra rewards.
+lang: en
+template: use-cases
+emoji: ":recycle:"
+image: /images/use-cases/restaking.png
+alt: A visual representation of restaking on Ethereum.
+sidebarDepth: 2
+summaryPoint1: Use staked ETH to secure other decentralized services and earn extra rewards.
+buttons:
+  - content: What is restaking?
+    toId: what-is-restaking
+  - content: How does it work?
+    toId: how-does-restaking-work
+    isSecondary: false
+---
+
+The Ethereum network secures billions of dollars of value 24/7, 365. How?
+
+People all over the world lock away (or “stake”) [ether (ETH)](/eth/) in smart contracts to run the software that processes Ethereum transactions and secures the Ethereum network. In return, they get rewarded with more ETH.
+
+Restaking is a technology built for [stakers](/staking/) to extend this security to other services, applications, or networks. In return, they earn additional restaking rewards. However, they also put their staked ETH at more risk.
+
+**Restaking explained in 18 minutes**
+
+<YouTube id="rOJo7VwPh7I" />
+
+## What is restaking? {#what-is-restaking}
+
+Restaking is when stakers use their already-staked ETH to secure other decentralized services. In return, restakers can get additional rewards from those other services on top of their regular ETH staking rewards. 
+
+The decentralized services secured by restaking are known as "Actively Validated Services" (AVSs). 
+In the same way that many ETH stakers run Ethereum validation software, many restakers run specialized AVS software.
+
+<br/>
+<Alert className="justify-between">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>Good to know</strong></p>
+  <p className="mt-2">While "Actively Validated Services" (AVSs) is the most common, different restaking platforms may use other names for the decentralized services they help secure, like "Autonomously Validated Services," "Distributed Secure Services," or "Networks."</p>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## Staking vs restaking {#staking-vs-restaking}
+
+| Staking                        | Restaking                                         |
+| ------------------------------ | ------------------------------------------------- |
+| Earn ETH rewards               | Earn ETH Rewards + AVS rewards                    |
+| Secures the Ethereum network   | Secures the Ethereum network + AVSs               |
+| No minimum ETH                 | No minimum ETH                                    |
+| Low risk level                 | Low-to-high risk level                            |
+| Withdraw time depends on queue | Withdraw time depends on queue + unbonding period |
+
+## Why do we need restaking? {#why-do-we-need-restaking}
+
+Picture two worlds; one with restaking and one without.
+
+ <TabbedSection />
+
+In this world with restaking, both the AVS and staker benefit from being able to find each other and trade security for extra rewards.
+
+<br/>
+
+<Alert className="justify-between">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>Added benefit of restaking</strong></p>
+  <p className="mt-2">AVSs can pour all their resources into building and marketing their services, instead of getting distracted with decentralization and security.</p>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## How does restaking work? {#how-does-restaking-work}
+
+There are several entities involved in restaking — each one of them plays an important part.
+
+| **Term**                | **Description**                                                                                                                                                                                                                   |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Restaking platforms** | A restaking platform is a service that connects AVSs, ETH stakers, and operators. They build decentralized applications for stakers to restake their ETH, and marketplaces where stakers, AVSs, and operators can find each other. |
+| **Native restakers**    | People who stake their ETH by running their own Ethereum validators can connect their staked ETH to a restaking platform, including EigenLayer and others, to earn restaking rewards on top of ETH validator rewards.                                              
+|
+| **Liquid restakers**    | People who stake their ETH via a third-party liquid staking provider, like Lido or Rocket Pool, get Liquid Staking Tokens (LSTs) that represent their staked ETH. They can restake these LSTs to earn restaking rewards while keeping their original ETH staked.                    
+|
+| **Operators**           | Operators run the AVSs' restaking software, performing the validation tasks each AVS requires. Operators are usually professional service providers that guarantee things like uptime and performance. Like non-operator restakers, operators use staked ETH to secure AVSs, but operators also receive extra rewards in exchange for their work.                            
+|
+| **AVSs**                | These are the decentralized services — like price oracles, token bridges, and data systems — that receive security from restakers and offer token rewards in return.                                                              |
+
+<br/>
+
+<Alert className="justify-between">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>Good to know</strong></p>
+  <p className="mt-2">Native and liquid restakers often delegate their staked ETH to an operator, instead of running the software to secure AVSs themselves.</p>
+  <p className="mt-2">This way they don't need to worry about complicated technical requirements from AVSs, though they receive a lower reward rate than operators.</p>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## What are some examples of restaking? {#what-are-some-examples-of-restaking}
+
+While a novel idea, a few projects have emerged to explore the possibilities of restaking.
+
+<RestakingList/>
+
+<br/>
+
+<Alert variant="warning" className="justify-between">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>Misnomer alert</strong></p>
+  <p className="mt-2">Some people confuse "restaking" with lending and borrowing LSTs in DeFi. Both put staked ETH to work, but restaking means securing AVSs, not just earning yield on LSTs.</p>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## How much can I make from restaking? {#how-much-can-i-make-from-restaking}
+
+While AVSs offer different rates, Liquid Restaking Tokens (LRTs) like eETH give you an idea of how much you can make. In the same way you get LSTs like stETH for staking your ETH, you can get LRTs like eETH for restaking stETH. These tokens earn ETH staking and restaking rewards.
+
+**It’s important to acknowledge the risks with restaking. The potential rewards can be attractive, but they’re not risk free.**
+
+## What are the risks of restaking? {#what-are-the-risks-of-restaking}
+
+| **Risks**                     | **Description**                                                                                                                                                |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Penalties (or “slashing”)** | Like ETH staking, if restakers/operators go offline, censor messages or try to corrupt the network, their stake can be slashed (burned) partially or entirely. |
+| **Centralization**            | If few operators dominate most of the restaking they could have a great influence on restakers, AVSs and even restaking platforms.                             |
+| **Chain reactions**           | If a restaker gets slashed while securing multiple AVSs, this could lower the security for the other AVSs, making them vulnerable.                             |
+| **Immediate access to funds** | There is a wait time (or “unbonding period”) for withdrawing restaked ETH so you may not always have access immediately.                                       |
+
+<br/>
+
+<Alert className="justify-between">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>The Ethereum co-founder is typing…</strong></p>
+  <p className="mt-2">
+    Vitalik, the co-founder of Ethereum, warned about the potential risks of restaking in a 2021 blog post called <a href = "https://vitalik.eth.limo/general/2023/05/21/dont_overload.html"> Don't Overload Consensus. </a>
+  </p>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## How to get started with restaking? {#how-to-get-started-with-restaking}
+
+| 🫡 Beginners                                                    | 🤓 Advanced Users                                                                     |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| 1. Stake ETH on platforms like Lido or Rocket Pool to get LSTs. | 1. Stake your ETH as a validator on Ethereum.                                         |
+| 2. Use those LSTs to start restaking on a restaking service.             | 2. Compare restaking services like EigenLayer, Symbiotic and others.                  |
+|                                                                 | 3. Follow the instructions to connect your validator to the restaking smart contract. |
+
+<br/>
+
+<Alert className="justify-between">
+<AlertEmoji text=":eyes:"/>
+<AlertContent>
+<AlertDescription>
+  <p className="mt-0"><strong>Ethereum Staking :</strong> How does it work?</p>
+  <ButtonLink href="/staking/">
+    Learn More
+  </ButtonLink>
+</AlertDescription>
+</AlertContent>
+</Alert>
+
+## Advanced {#advanced}
+
+<YouTube id="-V-fG4J1N_M" />
+
+## Further reading {#further-reading}
+
+1. [ethereum.org - ETH staking guide](https://ethereum.org/en/staking/)
+2. [Ledger Academy - What Is Ethereum Restaking?](https://www.ledger.com/academy/what-is-ethereum-restaking)
+3. [Consensys - EigenLayer: Decentralized Ethereum Restaking Protocol Explained](https://consensys.io/blog/eigenlayer-decentralized-ethereum-restaking-protocol-explained)
+4. [Vitalik Buterin - Don't overload Ethereum's consensus](https://vitalik.eth.limo/general/2023/05/21/dont_overload.html)
+5. [Cointelegraph - What is EigenLayer? Ethereum’s restaking protocol explained](https://cointelegraph.com/explained/what-is-eigenlayer-ethereums-restaking-protocol-explained)
+6. [a16z crypto research - EigenLayer: Permissionless Feature Addition to Ethereum with Sreeram Kannan](https://www.youtube.com/watch?v=-V-fG4J1N_M)
+7. [Junion - EigenLayer Explained: What is Restaking?](https://www.youtube.com/watch?v=5r0SooSQFJg)
+8. [The Block - Restaking Data Dash](https://www.theblock.co/data/decentralized-finance/restaking)

src/components/Content/restaking/RestakingList.tsx

@@ -0,0 +1,47 @@
+import ProductListComponent from "@/components/ProductList"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import eigenLayer from "@/public/images/use-cases/eigen-layer-logo.png"
+import symbiotic from "@/public/images/use-cases/symbiotic-logo.png"
+
+export const RestakingList = () => {
+  const productListSets = [
+    {
+      title: "EigenLayer (Restaking Platform)",
+      description: "",
+      image: eigenLayer,
+      alt: "eigen layer logo",
+      contentItems: [
+        <p key="eigenlayer-description">
+          EigenLayer introduced the idea of restaking in 2023 and has grown to
+          thousands of people restaking millions of ETH. Referred to as
+          “Ethereum middleware”, it connects stakers, operators and AVSs.
+        </p>,
+        <div key="eigenlayer-button">
+          <ButtonLink href="https://eigenlayer.xyz/" variant="outline">
+            Visit EigenLayer
+          </ButtonLink>
+        </div>,
+      ],
+    },
+    {
+      title: "Symbiotic (Restaking platform)",
+      description: "",
+      image: symbiotic,
+      alt: "Symbiotic logo",
+      contentItems: [
+        <p key="symbiotic-description">
+          Symbiotic is a permissionless restaking protocol that helps secure
+          different blockchain networks by letting users “restake” their assets.
+        </p>,
+        <div key="symbiotic-button">
+          <ButtonLink href="https://symbiotic.fi/" variant="outline">
+            Visit Symbiotic
+          </ButtonLink>
+        </div>,
+      ],
+    },
+  ]
+
+  return <ProductListComponent content={productListSets} actionLabel="Go" />
+}

src/components/Content/restaking/RestakingTab.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import Image from "next/image"
+
+import type { ChildOnlyProp } from "@/lib/types"
+
+import { Center } from "@/components/ui/flex"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+import withRestakingDark from "@/public/images/use-cases/with-restaking-dark.png"
+import withRestakingLight from "@/public/images/use-cases/with-restaking-light.png"
+import withoutRestakingDark from "@/public/images/use-cases/without-restaking-dark.png"
+import withoutRestakingLight from "@/public/images/use-cases/without-restaking-light.png"
+
+const Width60 = (props: ChildOnlyProp) => (
+  <div className="w-full flex-[3]" {...props} />
+)
+
+const Width40 = (props: ChildOnlyProp) => (
+  <Center className="w-full flex-[2]" {...props} />
+)
+
+export default function TabbedSection() {
+  return (
+    <>
+      <Width60>
+        <Tabs defaultValue="withRestaking" className="w-full max-w-4xl">
+          <TabsList className="mb-6 flex">
+            <TabsTrigger value="withRestaking">
+              A world with restaking
+            </TabsTrigger>
+            <TabsTrigger value="withoutRestaking">
+              A world without restaking
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="withRestaking">
+            <div className="flex justify-center">
+              {/* Light Mode Image */}
+              <Image
+                src={withRestakingLight}
+                alt="Restaking diagram light mode"
+                className="block dark:hidden"
+              />
+              {/* Dark Mode Image */}
+              <Image
+                src={withRestakingDark}
+                alt="Restaking diagram dark mode"
+                className="hidden dark:block"
+              />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="withoutRestaking">
+            <div className="flex justify-center">
+              {/* Light Mode Image */}
+              <Image
+                src={withoutRestakingLight}
+                alt="Restaking diagram light mode"
+                className="block dark:hidden"
+              />
+              {/* Dark Mode Image */}
+              <Image
+                src={withoutRestakingDark}
+                alt="Restaking diagram dark mode"
+                className="hidden dark:block"
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </Width60>
+      <Width40 />
+    </>
+  )
+}

src/components/MdComponents/index.tsx

@@ -4,6 +4,7 @@ import type { ChildOnlyProp } from "@/lib/types"
 
 import ContributorsQuizBanner from "@/components/Banners/ContributorsQuizBanner"
 import Card from "@/components/Card"
+import { RestakingList } from "@/components/Content/restaking/RestakingList"
 import BrowseApps from "@/components/Content/what-are-apps/BrowseApps"
 import WhatAreAppsStories from "@/components/Content/what-are-apps/WhatAreAppsStories"
 import Contributors from "@/components/Contributors"
@@ -181,6 +182,7 @@ export const reactComponents = {
   PieChart,
   QuizWidget: StandaloneQuizWidget,
   IssuesList,
+  RestakingList,
   Tag,
   Title,
   WhatAreAppsStories,

src/intl/en/template-usecase.json

@@ -7,6 +7,7 @@
   "template-usecase-dropdown-payments": "Ethereum Payments",
   "template-usecase-dropdown-prediction-markets": "Prediction Markets",
   "template-usecase-dropdown-social-networks": "Decentralized social networks",
+  "template-usecase-dropdown-restaking" : "Restaking",
   "template-usecase-dropdown-identity": "Decentralized identity",
   "template-usecase-dropdown-desci": "Decentralized science (DeSci)",
   "template-usecase-dropdown-refi": "Regenerative finance (ReFi)",

src/layouts/md/UseCases.tsx

@@ -7,6 +7,8 @@ import AiAgentProductLists from "@/components/Content/ai-agents/AiAgentProductLi
 import BuildYourOwnAIAgent from "@/components/Content/ai-agents/BuildYourOwnAIAgent"
 import OnchainGamingProductList from "@/components/Content/gaming/OnchainGamingProductList"
 import PredictionMarketLists from "@/components/Content/prediction-markets/PredictionMarketLists"
+import { RestakingList } from "@/components/Content/restaking/RestakingList"
+import TabbedSection from "@/components/Content/restaking/RestakingTab"
 import Emoji from "@/components/Emoji"
 import { ContentHero } from "@/components/Hero"
 import InlineLink from "@/components/ui/Link"
@@ -31,6 +33,8 @@ export const useCasesComponents = {
   CardGrid,
   AiAgentProductLists,
   BuildYourOwnAIAgent,
+  RestakingList,
+  TabbedSection,
   OnchainGamingProductList,
   PredictionMarketLists,
 }
@@ -175,6 +179,15 @@ export const UseCasesLayout = ({
           eventName: "real-world-assets",
         },
       },
+      {
+        text: t("template-usecase:template-usecase-dropdown-restaking"),
+        href: "/restaking/",
+        matomo: {
+          eventCategory: "use cases menu",
+          eventAction: "click",
+          eventName: "restaking",
+        },
+      },
     ],
   }