From c0e9133dd87bb36afb695f4958bbfc939efd02c0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 14 Mar 2026 16:10:09 +0000
Subject: [PATCH 1/8] Initial plan
From d86062a1da24782fa073ea90dfe71e37acf8a9f5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 14 Mar 2026 16:19:58 +0000
Subject: [PATCH 2/8] fix: CI workflow to use pnpm, redesign frontend with dark
professional theme, add /about page
Co-authored-by: mesayanroy <169074736+mesayanroy@users.noreply.github.com>
---
.github/workflows/ci.yml | 50 ++--
frontend/src/app/about/page.tsx | 224 ++++++++++++++++
frontend/src/app/docs/page.tsx | 163 ++++++++----
frontend/src/components/CtaBanner.tsx | 65 ++---
frontend/src/components/Features.tsx | 88 +++++--
frontend/src/components/Footer.tsx | 96 +++++--
frontend/src/components/Hero.tsx | 114 +++++---
frontend/src/components/HowItWorks.tsx | 31 +--
frontend/src/components/Navbar.tsx | 152 ++++++-----
frontend/src/components/SupportedDexes.tsx | 45 ++--
frontend/src/styles/globals.css | 287 ++++++++++++++++-----
11 files changed, 982 insertions(+), 333 deletions(-)
create mode 100644 frontend/src/app/about/page.tsx
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b36a9a8..a6b73d3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,26 +13,30 @@ jobs:
steps:
- uses: actions/checkout@v4
+ - name: Set up pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
- cache: "npm"
- cache-dependency-path: package-lock.json
+ cache: "pnpm"
- name: Install dependencies
- run: npm ci
+ run: pnpm install --frozen-lockfile
- name: Lint
- run: npm run lint
+ run: pnpm run lint
working-directory: backend
- name: Type-check
- run: npm run typecheck
+ run: pnpm run typecheck
working-directory: backend
- name: Run tests
- run: npm test -- --coverage
+ run: pnpm test -- --coverage
working-directory: backend
- name: Upload coverage
@@ -47,26 +51,30 @@ jobs:
steps:
- uses: actions/checkout@v4
+ - name: Set up pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
- cache: "npm"
- cache-dependency-path: package-lock.json
+ cache: "pnpm"
- name: Install dependencies
- run: npm ci
+ run: pnpm install --frozen-lockfile
- name: Lint
- run: npm run lint
+ run: pnpm run lint
working-directory: frontend
- name: Type-check
- run: npm run typecheck
+ run: pnpm run typecheck
working-directory: frontend
- name: Build
- run: npm run build
+ run: pnpm run build
working-directory: frontend
env:
NEXT_PUBLIC_API_URL: http://localhost:4000
@@ -77,30 +85,34 @@ jobs:
steps:
- uses: actions/checkout@v4
+ - name: Set up pnpm
+ uses: pnpm/action-setup@v4
+ with:
+ version: 10
+
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
- cache: "npm"
- cache-dependency-path: package-lock.json
+ cache: "pnpm"
- name: Install dependencies
- run: npm ci
+ run: pnpm install --frozen-lockfile
- name: Lint
- run: npm run lint
+ run: pnpm run lint
working-directory: cli
- name: Type-check
- run: npm run typecheck
+ run: pnpm run typecheck
working-directory: cli
- name: Run tests
- run: npm test
+ run: pnpm test
working-directory: cli
- name: Build
- run: npm run build
+ run: pnpm run build
working-directory: cli
build-docker:
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
new file mode 100644
index 0000000..a57a91e
--- /dev/null
+++ b/frontend/src/app/about/page.tsx
@@ -0,0 +1,224 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+ title: "About — L2-MEV Shield",
+ description:
+ "Learn about L2-MEV Shield — the open-source Solana MEV protection infrastructure.",
+};
+
+const TEAM_VALUES = [
+ {
+ title: "Open Source First",
+ desc: "Every line of code is public. We believe security infrastructure should be auditable, forkable, and community-owned.",
+ icon: (
+
+ ),
+ color: "indigo",
+ },
+ {
+ title: "User-First Privacy",
+ desc: "Your private keys and transaction details never leave your machine. We route privately, not through us.",
+ icon: (
+
+ ),
+ color: "cyan",
+ },
+ {
+ title: "Radical Transparency",
+ desc: "We publish our MEV detection methodology, threat models, and effectiveness statistics publicly for community review.",
+ icon: (
+
+ ),
+ color: "violet",
+ },
+];
+
+const TECH_STACK = [
+ { name: "Solana", desc: "High-performance blockchain for sub-second finality" },
+ { name: "Jito Bundles", desc: "Private transaction routing bypassing the public mempool" },
+ { name: "Anchor", desc: "Rust framework for on-chain slippage guard programs" },
+ { name: "Jupiter / Raydium / Orca", desc: "Leading Solana DEX integrations" },
+ { name: "WebSocket API", desc: "Real-time MEV detection and alert streaming" },
+ { name: "Next.js + TypeScript", desc: "Type-safe, server-rendered frontend dashboard" },
+];
+
+const ICON_COLORS: Record = {
+ indigo: "bg-indigo-500/15 text-indigo-400 border-indigo-500/20",
+ cyan: "bg-cyan-500/15 text-cyan-400 border-cyan-500/20",
+ violet: "bg-violet-500/15 text-violet-400 border-violet-500/20",
+};
+
+export default function AboutPage() {
+ return (
+
+ {/* Background glow */}
+
+
+
+
+ {/* Hero */}
+
+
+
About L2-MEV Shield
+
+ Built by traders,
+
+ for traders
+
+
+ L2-MEV Shield is open-source Solana MEV protection infrastructure. We combine
+ private transaction routing, real-time threat detection, and on-chain slippage
+ guards to ensure your trades settle at the price you expect — every time.
+
+ MEV (Maximal Extractable Value) bots steal millions of dollars from everyday
+ DeFi traders through sandwich attacks, frontrunning, and backrunning. These
+ predatory practices disproportionately hurt retail traders who lack
+ institutional-grade tooling.
+
+
+ L2-MEV Shield exists to level the playing field. We provide free, open-source
+ MEV protection tools that anyone can use — from individual traders to DeFi
+ protocols building on Solana.
+
+ We use battle-tested protocols and open standards at every layer of the stack.
+
+
+
+
+ {TECH_STACK.map((tech) => (
+
+
+
+
+
+
{tech.name}
+
{tech.desc}
+
+
+ ))}
+
+
+
+
+ {/* CTA */}
+
+
+
+
+
+
+
+ Ready to protect your trades?
+
+
+ Get started in minutes with our CLI or integrate via the REST API.
+
+
+
+ Get Started →
+
+
+ View Dashboard
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/app/docs/page.tsx b/frontend/src/app/docs/page.tsx
index 93cda8e..4e99e39 100644
--- a/frontend/src/app/docs/page.tsx
+++ b/frontend/src/app/docs/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
export const metadata: Metadata = {
title: "Docs — L2-MEV Shield",
+ description: "Everything you need to protect your Solana trades from MEV attacks.",
};
const DOC_SECTIONS = [
@@ -10,76 +11,136 @@ const DOC_SECTIONS = [
title: "Getting Started",
href: "/docs",
desc: "Overview, architecture, and prerequisites",
+ icon: (
+
+ ),
+ color: "indigo",
},
{
title: "CLI Reference",
href: "/docs/cli",
desc: "Every command, flag, and example for the l2mev CLI",
+ icon: (
+
+ ),
+ color: "cyan",
},
{
title: "API Reference",
href: "/docs/api",
desc: "REST endpoints and WebSocket API for developers",
+ icon: (
+
+ ),
+ color: "violet",
},
];
+const ICON_COLORS: Record = {
+ indigo: "bg-indigo-500/15 text-indigo-400 border-indigo-500/20",
+ cyan: "bg-cyan-500/15 text-cyan-400 border-cyan-500/20",
+ violet: "bg-violet-500/15 text-violet-400 border-violet-500/20",
+};
+
export default function DocsPage() {
return (
-
-
Documentation
-
- Everything you need to protect your Solana trades from MEV attacks.
-
-
-
- {DOC_SECTIONS.map((s) => (
-
-
{s.title}
-
{s.desc}
-
- ))}
+
+ {/* Background glow */}
+
+
-
-
What is MEV?
-
- Maximal Extractable Value (MEV) refers to the maximum value that can be
- extracted from block production beyond the standard block reward and gas fees by including,
- excluding, or reordering transactions.
-
+
+ {/* Header */}
+
+
Documentation
+
+ L2-MEV Shield Docs
+
+
+ Everything you need to protect your Solana trades from MEV attacks.
+
+
+
+ {/* Doc sections */}
+
+ {DOC_SECTIONS.map((s) => (
+
+
+ {s.icon}
+
+
+ {s.title}
+
+
{s.desc}
+
+ Read more →
+
+
+ ))}
+
-
Sandwich attacks explained
-
- When you submit a swap to a DEX, it briefly lives in the mempool (the queue of pending
- transactions) before being included in a block. A sandwich bot:
-
-
-
Sees your pending swap in the mempool
-
Submits a buy of the same token before you with a higher fee (frontrun)
-
Your trade executes at a worse price because the bot raised it
-
The bot immediately sells (backrun), pocketing the spread
-
+ {/* What is MEV */}
+
+
What is MEV?
+
+ Maximal Extractable Value (MEV) refers to
+ the maximum value that can be extracted from block production beyond the standard block
+ reward and gas fees by including, excluding, or reordering transactions.
+
-
How L2-MEV Shield stops it
-
-
- Private routing via Jito bundles — your transaction never enters the
- public mempool. Only the winning validator sees it.
-
-
- On-chain slippage guard — even if a bot frontruns, the on-chain program
- reverts your transaction if the actual execution price deviates beyond your tolerance.
-
-
- Real-time pool monitoring — anomalous price movements are detected
- before they affect your trade.
-
-
-
+
Sandwich attacks explained
+
+ When you submit a swap to a DEX, it briefly lives in the mempool (the queue of pending
+ transactions) before being included in a block. A sandwich bot:
+
+
+
Sees your pending swap in the mempool
+
Submits a buy of the same token before you with a higher fee (frontrun)
+
Your trade executes at a worse price because the bot raised it
+
The bot immediately sells (backrun), pocketing the spread
+
+
+
How L2-MEV Shield stops it
+
+
+ Private routing via Jito bundles — your
+ transaction never enters the public mempool. Only the winning validator sees it.
+
+
+ On-chain slippage guard — even if a bot
+ frontruns, the on-chain program reverts your transaction if the actual execution price
+ deviates beyond your tolerance.
+
+
+ Real-time pool monitoring — anomalous
+ price movements are detected before they affect your trade.
+
+
+
+
+ {/* Quick links */}
+
+
+ Open Dashboard →
+
+
+ About the Project
+
+
+
);
}
diff --git a/frontend/src/components/CtaBanner.tsx b/frontend/src/components/CtaBanner.tsx
index edbc353..0a4ba96 100644
--- a/frontend/src/components/CtaBanner.tsx
+++ b/frontend/src/components/CtaBanner.tsx
@@ -1,37 +1,44 @@
+import Link from "next/link";
+
export function CtaBanner() {
return (
-
-
-
- Your trades deserve to settle fairly
-
-
- Install the CLI in under 30 seconds. No account required. Open source and
- community-audited.
-
+
+
+
+ {/* Glow */}
+
+
+
+
+
Open Source & Free
+
+ Your trades deserve to settle fairly
+
+
+ Install the CLI in under 30 seconds. No account required. Open source and
+ community-audited.
+