feat: ef handbook (#90)

packages/common-config/preset/commonDocusaurusConfig.ts

@@ -56,6 +56,11 @@ const commonDocusaurusConfig: Partial<Config> = {
               to: "https://aztec.handbook.wonderland.xyz",
               target: "_self",
             },
+            {
+              label: "Ethereum Foundation",
+              to: "https://ef.handbook.wonderland.xyz",
+              target: "_self",
+            },
           ],
         },
         {

packages/common-config/src/components/CategoryCards/index.tsx

@@ -19,11 +19,13 @@ export interface CategoryCardsTheme {
 interface CategoryCardsProps {
   categories: Category[];
   theme?: CategoryCardsTheme;
+  columns?: number;
 }
 
 export default function CategoryCards({
   categories,
   theme,
+  columns = 4,
 }: CategoryCardsProps): ReactNode {
   const handleCardClick = (
     e: React.MouseEvent<HTMLAnchorElement>,
@@ -56,7 +58,12 @@ export default function CategoryCards({
   const currentTheme = theme || defaultTheme;
 
   return (
-    <div className={styles.categoryCards}>
+    <div 
+      className={styles.categoryCards}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      }}
+    >
       {categories.map((category) => (
         <Link
           key={category.title}

packages/common-config/static/common/styles/global.css

@@ -1482,6 +1482,21 @@ div[class*="buttonGroup"] button {
   transition: opacity 0.3s ease;
 }
 
+/* Ethereum Foundation logo */
+.dropdown__menu li:nth-child(4) .dropdown__link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background-image: url("/common/img/ef-logo.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  left: 1rem;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
 .dropdown__link:hover {
   background: var(--wonderland-blue-900) !important;
   color: var(--wonderland-gray-200) !important;

sites/aztec/src/pages/index.tsx

@@ -63,6 +63,15 @@ const aztecHandbooks: Handbook[] = [
       bgImage: "/common/img/background-handbook-card.jpg",
     },
   },
+  {
+    title: "Ethereum Foundation Handbook",
+    image: "/common/img/ef-logo.png",
+    href: "https://ef.handbook.wonderland.xyz",
+    background: {
+      bgType: "other",
+      bgImage: "/common/img/ef-social-card.png",
+    },
+  },
 ];
 
 const aztecHandbookProps: HandbookSectionProps = {

sites/ef/.gitignore

@@ -0,0 +1,2 @@
+# Static assets
+/static/common/

sites/ef/README.md

@@ -0,0 +1,56 @@
+# Docusaurus Documentation Template
+
+This is a template for creating new Docusaurus documentation sites within the handbook monorepo.
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- pnpm package manager
+
+### Setup
+
+1. Create a new site from the monorepo root:
+```bash
+pnpm create-handbook your-new-site
+cd sites/your-new-site
+```
+
+2. Install dependencies (from monorepo root):
+```bash
+pnpm install
+```
+
+3. Build assets and start development:
+```bash
+pnpm --filter your-new-site build:assets
+pnpm --filter your-new-site start
+```
+
+### Building for Production
+
+```bash
+pnpm --filter your-new-site build
+```
+
+## Customization
+
+1. **Update Configuration**: Edit `docusaurus.config.ts` with your project details
+2. **Add Content**: Replace content in `docs/` directory
+3. **Update Sidebar**: Modify `sidebars.ts` to match your structure
+4. **Add Images**: Place images in `static/img/`
+
+## Project Structure
+
+```
+├── docs/           # Documentation content
+├── src/            # Custom components and styles
+├── static/         # Static assets
+├── docusaurus.config.ts
+└── sidebars.ts
+```
+
+## Deployment
+
+Configure deployment in your hosting platform of choice (Vercel, Netlify, etc.). 

sites/ef/docs/interop/coming-soon.md

@@ -0,0 +1,6 @@
+# Interoperability
+
+This chapter is coming soon.
+
+
+

sites/ef/docs/intro/welcome.md

@@ -0,0 +1,16 @@
+---
+id: welcome
+title: Welcome
+sidebar_label: Welcome
+---
+
+# Welcome
+
+This is your documentation site. Start by editing this page and adding your content.
+
+## Quick Start
+
+1. Edit this file to add your content
+2. Update `sidebars.ts` to organize your navigation
+3. Add more pages in the `docs/` directory
+4. Customize `docusaurus.config.ts` with your project details 

sites/ef/docs/kohaku/account-abstraction.md

@@ -0,0 +1,61 @@
+# Account abstraction
+
+
+The Kohaku project framed Ethereum's evolution around three critical shifts. This document dives deep into the engine driving one of them the **wallet security transition**.
+
+The goal of this transition is to move every user to a smart contract wallet. Why? Because Ethereum's historical division between rigid, insecure EOAs and flexible smart accounts is a source of massive user friction. **Account Abstraction** is the set of proposals designed to eliminate this division by creating a single, unified account type.
+
+Here, we will explore the journey from the siloed approach of **ERC-4337** to the unifying bridge of **EIP-7702**.
+
+### **The great account divide**
+
+Ethereum has two account types.
+
+1. **Externally Owned Accounts (EOAs)** are controlled by a single private key. They are rigid and unforgiving. Lose your key and you lose everything.
+2. **Smart Accounts** are controlled by code. They are flexible and can have features like social recovery or spending limits.
+
+The core issue is that only EOAs can start transactions and pay for gas. A smart account can't act on its own. This forces clumsy workarounds and creates a two-tiered system for users.
+
+### **ERC-4337 A separate universe**
+
+**ERC-4337** was a breakthrough that simulated account abstraction without a core protocol change. It created a parallel transaction system for smart accounts.
+
+The diagram below shows this flow. Instead of a normal transaction (white path), a smart account sends a `UserOperation` intent to a separate "alternative mempool" (blue path). Specialized **Bundlers** package these into a regular transaction, which hits a global **EntryPoint** contract to execute the `UserOperation`.
+
+
+![4337.png](\img\diagrams\4337.png)
+
+This architecture is powerful. It enables **Paymasters** who can sponsor gas fees and allows for batching multiple actions into a single click.
+
+But its main drawback is massive, **ERC-4337 is a silo.** It is not backward compatible so if you have an existing EOA, you can't use it. You must create a new smart account and migrate all your assets, history and identity. This leaves the vast majority of Ethereum users and capital on the sidelines.
+
+### **EIP-7702 the unifying Bridge**
+
+**EIP-7702**, part of the Pectra upgrade, solves this silo problem with an elegant fix. It allows an EOA to **temporarily act like a smart contract for one transaction.** By doing this, it makes account abstraction features **native to the protocol** for the first time.
+
+The diagram shows how. An EOA uses a new `type 4` transaction to grant itself temporary `code`. This transforms the signature from a static authorization into programmable logic. The transaction includes an **authorization list**, which defines what the temporary contract is allowed to do.
+
+![7702.png](\img\diagrams\7702.png)
+
+This is crucial for wallet developers, a wallet can now define on the fly rules for a single transaction, such as:
+
+- On-demand multisig checks.
+- dApp-specific spending limits or permissions.
+- Gas sponsorship policies without external relayers.
+
+After the transaction, the EOA reverts to its normal state. It gets all the power of a smart account with none of the permanent overhead. This brings account abstraction to everyone instantly, with no need to migrate assets.
+
+### **Completing the circuit 7702 + 4337**
+
+Thinking of these EIPs as competitors is wrong. The real unlock is how they work together. **EIP-7702 is the native onramp to the ERC-4337 ecosystem.**
+
+An EOA user can now sign a single 7702 transaction. This transaction's temporary `code` can be built to do one thing perfectly, create and authorize an ERC-4337 `UserOperation`.
+
+This means any EOA can now leverage the entire infrastructure built for 4337.
+
+- A dApp's **Paymaster** can sponsor gas for an EOA user.
+- An EOA user can **batch** an approve and a swap into one atomic action.
+
+EIP-7702 provides the native protocol hook and ERC-4337 provides the rich application layer services. Together, they unify Ethereum's accounts. The ultimate goal is an experience where the user doesn't know or care about account types. There is just *their account,* a secure and programmable entry point to the decentralized web.
+
+For more details on ERC-4337, see the [official documentation](https://docs.erc4337.io/).