feat: 🎸 New ERC7715 implementation

apps/erc7715/.env.example

@@ -0,0 +1,6 @@
+# Optional defaults for the permission request form (wired in `lib/env.ts` via `next.config.ts`).
+# Where you want to send the funds to
+SESSION_ACCOUNT_ADDRESS=
+
+# ERC20 Token Address
+TOKEN_ADDRESS=

apps/erc7715/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/erc7715/README.md

@@ -0,0 +1,48 @@
+# ERC-7715 Execution Permissions
+
+A Next.js web app for exploring [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715) wallet execution permissions on Berachain. Connect a MetaMask wallet, probe supported permission types, request scoped execution permissions (native token or ERC-20), and redeem delegations on-chain via the returned `delegationManager`.
+
+![ERC7715](./README/erc7715.png)
+
+**How it works:**
+
+1. **Probe** — calls `wallet_getSupportedExecutionPermissions` to discover which permission types, chains, and rule types the connected wallet supports.
+2. **Request** — builds a `PermissionRequest` and calls `wallet_requestExecutionPermissions`, returning a `PermissionResponse` with a `context` and `delegationManager` address.
+3. **Redeem** — submits a `redeemDelegations` transaction to the `delegationManager` contract (per ERC-7710), encoding either a native transfer or an ERC-20 `transfer`.
+
+## Requirements
+
+- [Node.js](https://nodejs.org/) v18+ (or [Bun](https://bun.sh/))
+- A browser with [MetaMask](https://metamask.io/) installed (must support ERC-7715 — e.g. MetaMask Flask)
+
+## Quickstart
+
+Install dependencies:
+
+```bash
+bun install
+```
+
+Copy the example env file and fill in your values:
+
+```bash
+cp .env.example .env
+```
+
+```
+# Where you want to send the funds to (session account)
+SESSION_ACCOUNT_ADDRESS=0x...
+
+# ERC-20 token address used as the default in the request form
+TOKEN_ADDRESS=0x...
+```
+
+Both variables are optional — they pre-populate form fields in the UI.
+
+Start the dev server:
+
+```bash
+bun run dev
+```
+
+The app runs at [http://localhost:3002](http://localhost:3002).

apps/erc7715/app/globals.css

@@ -0,0 +1,28 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --bera-gold: #f5a623;
+  --bera-gold-hover: #ffb84d;
+  --card: #1a1a1a;
+  --border: #2a2a2a;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-dm-sans);
+  --font-mono: var(--font-jetbrains-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-dm-sans), sans-serif;
+}
+
+.font-mono {
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+}

apps/erc7715/app/layout.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { DM_Sans, JetBrains_Mono } from "next/font/google";
+import { headers } from "next/headers";
+import { cookieToInitialState } from "wagmi";
+import { Providers } from "./providers";
+import { config } from "@/lib/wagmi";
+import "./globals.css";
+
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+});
+
+const jetBrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "ERC-7715 wallet support",
+  description:
+    "Check whether your wallet supports ERC-7715 execution permissions",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const initialState = cookieToInitialState(
+    config,
+    (await headers()).get("cookie") ?? undefined,
+  );
+
+  return (
+    <html
+      lang="en"
+      className={`${dmSans.variable} ${jetBrainsMono.variable} h-full antialiased`}
+    >
+      <body className="flex min-h-full flex-col bg-[#0A0A0A] font-sans text-zinc-100 antialiased">
+        <Providers initialState={initialState}>{children}</Providers>
+      </body>
+    </html>
+  );
+}

apps/erc7715/app/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useCallback } from "react";
+import { RedeemSection } from "@/components/RedeemSection";
+import { RequestPermissionsSection } from "@/components/RequestPermissionsSection";
+import { SupportedPermissions } from "@/components/SupportedPermissions";
+import { UnsupportedBanner } from "@/components/UnsupportedBanner";
+import {
+  useStoredPermission,
+  type StoredGrant,
+} from "@/hooks/useStoredPermission";
+import { useWalletSupport } from "@/hooks/useWalletSupport";
+import { useConnect, useConnection, useDisconnect } from "wagmi";
+
+export default function HomePage() {
+  const { address, isConnected, status } = useConnection();
+  const { connect, connectors, isPending: isConnectPending } = useConnect();
+  const { disconnect } = useDisconnect();
+  const support = useWalletSupport();
+
+  const { grant, setGrant, clear: clearGrant } = useStoredPermission();
+
+  const handleGrantChange = useCallback(
+    (next: StoredGrant | null) => setGrant(next),
+    [setGrant],
+  );
+
+  const metaMask = connectors.find((c) => c.type === "metaMask");
+
+  const showPhase2Request =
+    isConnected &&
+    status === "connected" &&
+    !support.isLoading &&
+    !support.isUnsupported &&
+    support.data !== undefined;
+
+  return (
+    <div className="flex min-h-full flex-1 flex-col bg-[#0A0A0A] text-zinc-100">
+      <header className="border-b border-[#2A2A2A] bg-[#0A0A0A]/90 backdrop-blur">
+        <div className="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-10 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
+              ERC-7715 execution permissions
+            </h1>
+            <p className="mt-2 max-w-xl text-sm text-zinc-400">
+              Probe the connected wallet for{" "}
+              <span className="font-mono text-xs text-zinc-300">
+                wallet_getSupportedExecutionPermissions
+              </span>
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            {!isConnected ? (
+              <button
+                type="button"
+                className="inline-flex items-center justify-center rounded-xl bg-[#F5A623] px-5 py-2.5 text-sm font-semibold text-black transition-colors hover:bg-[#FFB84D] disabled:opacity-50"
+                disabled={!metaMask || isConnectPending}
+                onClick={() => metaMask && connect({ connector: metaMask })}
+              >
+                {isConnectPending ? "Connecting…" : "Connect Wallet"}
+              </button>
+            ) : (
+              <>
+                <span
+                  className="truncate font-mono text-xs text-zinc-400 sm:max-w-48"
+                  title={address}
+                >
+                  {address}
+                </span>
+                <button
+                  type="button"
+                  className="rounded-lg border border-[#2A2A2A] px-3 py-1.5 text-xs text-zinc-300 transition hover:border-[#F5A623]/50 hover:text-white"
+                  onClick={() => disconnect()}
+                >
+                  Disconnect
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto flex w-full max-w-5xl flex-1 flex-col space-y-10 px-4 py-10 pb-40">
+        {!isConnected || status !== "connected" ? (
+          <p className="rounded-xl border border-dashed border-[#2A2A2A] bg-[#1A1A1A]/50 px-4 py-8 text-center text-sm text-zinc-500">
+            Connect MetaMask to automatically check execution permission support
+            on Berachain networks.
+          </p>
+        ) : (
+          <>
+            {support.isUnsupported && <UnsupportedBanner />}
+
+            {support.isLoading && (
+              <p className="rounded-xl border border-[#2A2A2A] bg-[#1A1A1A] px-4 py-6 text-sm text-zinc-400">
+                Querying the wallet for supported execution permissions…
+              </p>
+            )}
+
+            {support.isError && !support.isUnsupported && (
+              <div
+                className="rounded-xl border border-red-500/40 bg-red-500/15 px-4 py-4 text-sm text-red-400"
+                role="alert"
+              >
+                <p className="font-medium text-red-300">
+                  Could not read supported permissions
+                </p>
+                {support.errorMessage && (
+                  <p className="mt-2 font-mono text-xs">
+                    {support.errorMessage}
+                  </p>
+                )}
+                {support.errorCode !== undefined && (
+                  <p className="mt-1 font-mono text-xs text-red-300/90">
+                    RPC code: {support.errorCode}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {support.data && support.rawResponse !== undefined && (
+              <SupportedPermissions
+                data={support.data}
+                rawResponse={support.rawResponse}
+              />
+            )}
+
+            {showPhase2Request && support.data ? (
+              <RequestPermissionsSection
+                supported={support.data}
+                storedGrant={grant}
+                onGrantChange={handleGrantChange}
+              />
+            ) : null}
+
+            <RedeemSection
+              initialResponse={grant?.response ?? null}
+              onClear={clearGrant}
+            />
+          </>
+        )}
+      </main>
+    </div>
+  );
+}

apps/erc7715/app/providers.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import { type State, WagmiProvider } from "wagmi";
+import { config } from "@/lib/wagmi";
+
+type ProvidersProps = {
+  children: ReactNode;
+  initialState?: State | undefined;
+};
+
+export function Providers({ children, initialState }: ProvidersProps) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={config} initialState={initialState}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}