Update wallet SDK dialog flow and Next.js demo

.changeset/config.json

@@ -17,6 +17,7 @@
     "mpp-abstract-hono-example",
     "mpp-demo",
     "agw-nextjs",
+    "wallet-sdk-nextjs",
     "agw-thirdweb-nextjs",
     "@abstract-foundation/agw-thirdweb",
     "@abstract-foundation/agw-example-ui"

.changeset/tame-windows-learn.md

@@ -0,0 +1,5 @@
+---
+"@abstract-foundation/wallet-sdk": patch
+---
+
+Align iframe dialog behavior with the wallet host by using a transparent parent backdrop, forwarding local dev protocol bypass configuration, and supporting host-driven dialog sizing.

examples/wallet-sdk-nextjs/README.md

@@ -0,0 +1,44 @@
+# wallet-sdk-nextjs
+
+Minimal Next.js demo of [`@abstract-foundation/wallet-sdk`](../../packages/wallet-sdk).
+
+The SDK opens an iframe pointing at the Abstract wallet-host (the
+`apps/web/wallet-host` app in the [mono-ts](https://github.com/Abstract-Foundation/mono-ts) repo) and proxies EIP-1193
+requests to it. This demo walks through the canonical flow:
+
+1. **Connect** → `wallet_connect` opens the iframe; user authenticates
+   inside the wallet origin; SDK returns the AGW smart-account address.
+2. **Sign Message** → `personal_sign` opens the iframe with the
+   `@abstract/wallet-ui` signature-review surface; user approves; SDK
+   returns the signature.
+3. **Send Transaction** → `eth_sendTransaction` opens the iframe with the
+   transaction-review surface; user approves; SDK returns the tx hash.
+   AGW sponsors gas via paymaster.
+
+Every action's request + result is appended to a log panel so the iframe
+round-trip is visible.
+
+## Run
+
+```bash
+# 1. Bring up the wallet-host (in the mono-ts repo, separate terminal):
+turbo dev --filter=wallet-host
+
+# 2. Bring up this demo (defaults to http://localhost:3004):
+pnpm dev
+```
+
+Override the wallet-host URL via `NEXT_PUBLIC_WALLET_HOST_URL`:
+
+```bash
+NEXT_PUBLIC_WALLET_HOST_URL=https://wallet.abs.xyz pnpm dev
+```
+
+## What this demo does *not* do
+
+- No Wagmi / agw-react. The SDK gives you a plain EIP-1193 provider; pass
+  it to viem/wagmi/ethers/whatever the host app already uses.
+- No connector switching, no chain switching UI. Single chain (Abstract),
+  hardcoded `chainId = 2741`. Add as needed.
+- No styling beyond a small inline stylesheet. The SDK is presentational
+  inside the iframe; the host app owns its own visual surface.

examples/wallet-sdk-nextjs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/wallet-sdk-nextjs/next.config.mjs

@@ -0,0 +1,35 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // The wallet-sdk dual-publishes ESM + CJS; Next.js can consume either.
+  // Listed in `transpilePackages` for the same reason agw-nextjs lists its
+  // workspace packages: keeps source maps + named imports working when the
+  // workspace dep is in flight (pre-publish).
+  transpilePackages: [
+    "@abstract-foundation/agw-example-ui",
+    "@abstract-foundation/wallet-sdk",
+  ],
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@abstract-foundation/wallet-sdk$": path.join(
+        __dirname,
+        "../../packages/wallet-sdk/src/exports/index.ts",
+      ),
+      "@abstract-foundation/wallet-sdk/core$": path.join(
+        __dirname,
+        "../../packages/wallet-sdk/src/exports/core.ts",
+      ),
+    };
+    config.resolve.extensionAlias = {
+      ".js": [".ts", ".tsx", ".js", ".jsx"],
+    };
+    return config;
+  },
+};
+
+export default nextConfig;

examples/wallet-sdk-nextjs/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "wallet-sdk-nextjs",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Minimal Next.js demo of @abstract-foundation/wallet-sdk. Mounts the iframe-embeddable Abstract wallet-host, walks through wallet_connect → personal_sign → eth_sendTransaction.",
+  "scripts": {
+    "dev": "next dev -p 3004",
+    "build": "next build",
+    "start": "next start -p 3004",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@abstract-foundation/agw-example-ui": "workspace:*",
+    "@abstract-foundation/wallet-sdk": "workspace:*",
+    "next": "15.5.12",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "viem": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "^4",
+    "typescript": "catalog:"
+  }
+}

examples/wallet-sdk-nextjs/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

examples/wallet-sdk-nextjs/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import "@abstract-foundation/agw-example-ui/styles.css";
+
+import { favicon } from "@abstract-foundation/agw-example-ui";
+import { ExampleRootLayout } from "@abstract-foundation/agw-example-ui/layout";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Abstract Wallet SDK",
+  description: "Minimal Next.js demo of @abstract-foundation/wallet-sdk.",
+  icons: {
+    icon: favicon.src,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ExampleRootLayout>{children}</ExampleRootLayout>;
+}

examples/wallet-sdk-nextjs/src/app/page.tsx

@@ -0,0 +1,10 @@
+import { ExamplePage } from "@abstract-foundation/agw-example-ui";
+import { Demo } from "@/components/Demo";
+
+export default function Page() {
+  return (
+    <ExamplePage editPath="src/components/Demo.tsx">
+      <Demo />
+    </ExamplePage>
+  );
+}