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 7 minutes**
+
+<YouTube id="5r0SooSQFJg" />
+
+## 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/>
+<InfoBanner shouldSpaceBetween emoji=":bulb:">
+  <div>
+    <strong>Good to know</strong><br />
+    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."
+  </div>
+</InfoBanner>
+
+## 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-medium 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/>
+
+<InfoBanner shouldSpaceBetween emoji=":bulb:">
+  <div>
+    <strong>Added benefit of restaking</strong><br />
+    AVSs can pour all their resources into building and marketing their services, instead of getting distracted with decentralization and security.
+  </div>
+</InfoBanner>
+
+## 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/>
+
+<InfoBanner shouldSpaceBetween emoji=":bulb:">
+  <div>
+    <strong>Good to know</strong><br />
+    Native and liquid restakers often delegate their staked ETH to an operator, instead of running the software to secure AVSs themselves.<br />
+    This way they don’t need to worry about complicated technical requirements from AVSs, though they receive a lower reward rate than operators.
+  </div>
+</InfoBanner>
+
+## 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.
+
+<EigenLayer/>
+
+<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+  <Card title="EigenPods" emoji=":money_with_wings:" >
+    A set of smart contracts that let ETH validators connect their staked ETH to EigenLayer's restaking system.
+  </Card>
+
+  <Card title="Marketplace" emoji=":earth_africa:" >
+    Making it easy for AVSs to find operators and stakers that meet their requirements, and vice versa.
+  </Card>
+
+  <Card title="Tooling" emoji=":hammer_and_wrench:" >
+    Developer libraries, documentation and codebases to integrate with and build DeFi protocols on top of EigenLayer.
+  </Card>
+</CardGrid>
+
+## Other examples {#other-examples}
+
+<RestakingList/>
+
+<br/>
+
+<InfoBanner shouldSpaceBetween emoji=":bulb:" isWarning>
+  <div>
+    <strong>Misnomer alert</strong><br />
+    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.
+  </div>
+</InfoBanner>
+
+## 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}
+
+To truly appreciate the impact of Ethereum payments, it's worth comparing them to traditional fiat currencies:
+
+| **Risks**                     | **Description**                                                                                                                                                | **Risk level** |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| **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. | LOW            |
+| **Centralization**            | If few operators dominate most of the restaking they could have a great influence on restakers, AVSs and even restaking platforms.                             | LOW            |
+| **Chain reactions**           | If a restaker gets slashed while securing multiple AVSs, this could lower the security for the other AVSs, making them vulnerable.                             | LOW/MEDIUM     |
+| **Immediate access to funds** | There is a wait time (or “unbonding period”) for withdrawing restaked ETH so you may not always have access immediately.                                       | LOW/MEDIUM     |
+
+<br/>
+
+<InfoBanner shouldSpaceBetween emoji=":bulb:">
+  <div>
+    <p><strong>The Ethereum co-founder is typing…</strong></p>
+    <p>
+      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>
+  </div>
+</InfoBanner>
+
+## 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 EigenLayer.             | 2. Compare restaking services like EigenLayer, Symbiotic and others.                  |
+|                                                                 | 3. Follow the instructions to connect your validator to the restaking smart contract. |
+
+<br/>
+
+<InfoBanner shouldSpaceBetween emoji=":eyes:">
+  <div><strong>Ethereum Staking :</strong> How does it work?</div>
+  <ButtonLink href="/staking/">
+    Learn More
+  </ButtonLink>
+</InfoBanner>
+
+## 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,112 @@
+import ProductListComponent from "@/components/ProductList"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import eigenLayer from "@/public/images/eigen-layer-logo.png"
+import lido from "@/public/images/use-cases/lido-logo.png"
+import obol from "@/public/images/use-cases/obol-logo.png"
+import omni from "@/public/images/use-cases/omni-logo.png"
+import symbiotic from "@/public/images/use-cases/symbiotic-logo.png"
+
+export const RestakingList = () => {
+  const productListSets = [
+    {
+      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>,
+      ],
+    },
+    {
+      title: "Omni Network (AVS)",
+      description: "",
+      image: omni,
+      alt: "Omni logo",
+      contentItems: [
+        <p key="omni-description">
+          Omni Network is an AVS that uses EigenLayer to secure messaging
+          between Ethereum and other blockchains. Operators guarantee delivery
+          of these messages in return for OMNI tokens.
+        </p>,
+        <div key="omni-button">
+          <ButtonLink href="https://omni.network/" variant="outline">
+            Visit Omni
+          </ButtonLink>
+        </div>,
+      ],
+    },
+    {
+      title: "Obol Network (Operator)",
+      description: "",
+      image: obol,
+      alt: "Obol logo",
+      contentItems: [
+        <p key="obol-description">
+          Obol Network is an EigenLayer operator. They use a unique set up that
+          splits the work from an AVS across multiple operators, improving
+          stability and reducing the chance of issues like downtime.
+        </p>,
+        <div key="omni-button">
+          <ButtonLink href="https://obol.org/" variant="outline">
+            Visit Obol
+          </ButtonLink>
+        </div>,
+      ],
+    },
+    {
+      title: "Lido (LSP)",
+      description: "",
+      image: lido,
+      alt: "Lido logo",
+      contentItems: [
+        <p key="lido-description">
+          Lido is a Liquid Staking Protocol (LSP) on Ethereum that lets people
+          use their ETH while staking it on Ethereum. Users who stake ETH
+          through Lido receive stETH tokens, that they can use for restaking and
+          DeFi lending.
+        </p>,
+        <div key="lido-button">
+          <ButtonLink href="https://lido.fi/" variant="outline">
+            Visit Lido
+          </ButtonLink>
+        </div>,
+      ],
+    },
+  ]
+
+  return <ProductListComponent content={productListSets} actionLabel="Go" />
+}
+
+export const EigenLayer = () => {
+  const productListSets = [
+    {
+      title: "EigenLayer (Restaking Platform)",
+      description: "",
+      image: eigenLayer,
+      alt: "eigen layer logo",
+      contentItems: [
+        <p key="symbiotic-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="symbiotic-button">
+          <ButtonLink href="https://www.eigenlayer.xyz/" variant="outline">
+            Visit EigenLayer
+          </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/FeedbackWidget/FixedDot.tsx

@@ -44,8 +44,13 @@ const FixedDot = forwardRef<HTMLButtonElement, FixedDotProps>(
         >
           <span
             className={cn(
+
+              "line-clamp-2 hidden h-full items-center font-bold text-white leading-[1.2rem]",
+              isExpanded && "lg:flex"
+
               "line-clamp-2 h-full items-center whitespace-nowrap font-bold leading-5 text-white",
               isExpanded ? "lg:flex" : "hidden"
+
             )}
           >
             {t("feedback-widget-prompt")}

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)",