|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +This file provides guidance for AI agents working with the Reown AppKit repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +Reown AppKit is a full-stack toolkit for building blockchain application user experiences. It provides developers with a comprehensive SDK that abstracts the complexity of Web3 wallet integration, multi-chain support, and user authentication across Ethereum (EVM), Solana, Bitcoin, Polkadot, and TON networks. |
| 8 | + |
| 9 | +AppKit enables connection to 300+ wallets including MetaMask, WalletConnect, Phantom, Leather, and embedded email/social wallets. It provides a single API for multiple blockchain ecosystems with automatic network switching, built-in support for token swaps, on-ramp (fiat-to-crypto), transaction sending, and pre-built customizable modal UI with dark/light themes. |
| 10 | + |
| 11 | +The SDK is available for React, Next.js, Vue, Nuxt, Svelte, vanilla JavaScript, React Native, Flutter, Android, iOS, and Unity. |
| 12 | + |
| 13 | +## Repository Structure |
| 14 | + |
| 15 | +This is a pnpm workspace monorepo managed by Turborepo, organized into four main categories: |
| 16 | + |
| 17 | +``` |
| 18 | +@reown/appkit-monorepo/ |
| 19 | +├── packages/ # Core SDK packages (publishable to npm) |
| 20 | +│ ├── appkit/ # Main SDK entry point (@reown/appkit) |
| 21 | +│ ├── adapters/ # Blockchain-specific adapters |
| 22 | +│ │ ├── wagmi/ # EVM via Wagmi/viem |
| 23 | +│ │ ├── ethers/ # EVM via ethers v6 |
| 24 | +│ │ ├── ethers5/ # EVM via ethers v5 |
| 25 | +│ │ ├── solana/ # Solana support |
| 26 | +│ │ ├── bitcoin/ # Bitcoin support |
| 27 | +│ │ ├── polkadot/ # Polkadot support |
| 28 | +│ │ └── ton/ # TON support |
| 29 | +│ ├── controllers/ # State management (valtio-based) |
| 30 | +│ ├── ui/ # Atomic Web Components (LitElement, wui-* prefix) |
| 31 | +│ ├── scaffold-ui/ # High-level UI flows (w3m-* prefix) |
| 32 | +│ ├── common/ # Shared utilities |
| 33 | +│ ├── appkit-utils/ # Multi-chain utilities |
| 34 | +│ ├── siwe/ # Sign-In With Ethereum |
| 35 | +│ ├── siwx/ # Cross-chain authentication |
| 36 | +│ ├── wallet/ # Embedded wallet provider |
| 37 | +│ └── ... # Other utility packages |
| 38 | +├── apps/ # Internal applications |
| 39 | +│ ├── laboratory/ # Primary E2E testing app (Next.js + Playwright) |
| 40 | +│ ├── demo/ # Marketing/demo application |
| 41 | +│ ├── gallery/ # Storybook component gallery |
| 42 | +│ └── browser-extension/ |
| 43 | +├── examples/ # Integration examples ({framework}-{adapter} pattern) |
| 44 | +└── .github/ # CI/CD workflows |
| 45 | +``` |
| 46 | + |
| 47 | +## Key Commands |
| 48 | + |
| 49 | +All commands should be run from the repository root using pnpm: |
| 50 | + |
| 51 | +```bash |
| 52 | +# Install dependencies |
| 53 | +pnpm install |
| 54 | + |
| 55 | +# Build all packages (required before running apps) |
| 56 | +pnpm build |
| 57 | + |
| 58 | +# Format code with Prettier (run before committing) |
| 59 | +pnpm run prettier:format |
| 60 | + |
| 61 | +# Run unit tests (Vitest) |
| 62 | +pnpm test |
| 63 | + |
| 64 | +# Run type checking |
| 65 | +pnpm typecheck |
| 66 | + |
| 67 | +# Run linting |
| 68 | +pnpm lint |
| 69 | + |
| 70 | +# Run the Laboratory app for testing |
| 71 | +pnpm laboratory |
| 72 | + |
| 73 | +# Run the demo app |
| 74 | +pnpm demo:dev |
| 75 | + |
| 76 | +# Run the component gallery (Storybook) |
| 77 | +pnpm gallery |
| 78 | + |
| 79 | +# Create a changeset for versioning |
| 80 | +pnpm changeset |
| 81 | + |
| 82 | +# Check bundle size |
| 83 | +pnpm size |
| 84 | +``` |
| 85 | + |
| 86 | +## Architecture Overview |
| 87 | + |
| 88 | +### Core Packages |
| 89 | + |
| 90 | +The `@reown/appkit` package is the main entry point. It initializes via `createAppKit()` with configuration for networks, adapters, and features. The `AppKitBaseClient` class manages adapters, controllers, and connection lifecycle. |
| 91 | + |
| 92 | +### Adapters |
| 93 | + |
| 94 | +Each blockchain adapter implements the `AdapterBlueprint` interface with standard methods: `connect()`, `disconnect()`, `signMessage()`, `sendTransaction()`, `switchNetwork()`. Adapters emit events for `accountChanged`, `disconnect`, and `switchNetwork`. |
| 95 | + |
| 96 | +### Controllers |
| 97 | + |
| 98 | +State management uses valtio proxies. Key controllers include `ChainController` (multi-namespace blockchain state), `ConnectionController` (wallet connection lifecycle), `ModalController` (UI modal visibility), and `OptionsController` (feature flags and configuration). |
| 99 | + |
| 100 | +### UI Components |
| 101 | + |
| 102 | +The UI layer consists of atomic Web Components (`wui-*` prefix) from `@reown/appkit-ui` built with LitElement, and high-level scaffold components (`w3m-*` prefix) from `@reown/appkit-scaffold-ui` that compose the atoms and subscribe to controllers. |
| 103 | + |
| 104 | +### Chain Namespaces |
| 105 | + |
| 106 | +Blockchain ecosystems are identified by namespace: `eip155` (EVM), `solana`, `bip122` (Bitcoin), `polkadot`, and `ton`. These are used as keys in the `ChainController.chains` Map. |
| 107 | + |
| 108 | +## Development Notes |
| 109 | + |
| 110 | +### Code Quality Standards |
| 111 | + |
| 112 | +When creating new UI components in `packages/ui/`, components must apply `resetStyles`, use the `wui-` prefix, and include required section comments (`// -- Render ----`, `// -- State & Properties ----`, `// -- Private ----`). New components require corresponding Storybook stories in `apps/gallery/`. |
| 113 | + |
| 114 | +When creating new scaffold components in `packages/scaffold-ui/`, components must use the `w3m-` prefix, include proper unsubscribe logic for controller subscriptions, and use relative imports instead of direct package access. |
| 115 | + |
| 116 | +Controllers in `packages/controllers/` must include section comments (`// -- Types ----`, `// -- State ----`, `// -- Controller ----`), use `valtio/vanilla` instead of `valtio`, and have corresponding tests. |
| 117 | + |
| 118 | +### Import Rules |
| 119 | + |
| 120 | +Use relative imports within packages instead of direct package access. Client packages (wagmi, solana, ethers, ethers5) cannot import from `@reown/appkit-controllers` or `@reown/appkit-ui`. The UI package cannot import from `@reown/appkit-controllers`. |
| 121 | + |
| 122 | +### Testing |
| 123 | + |
| 124 | +Unit tests use Vitest and are located alongside source files or in `test/` directories. E2E tests use Playwright in the Laboratory app (`apps/laboratory/tests/`). The Laboratory app uses Page Object Model pattern with `ModalPage`, `WalletPage`, and corresponding validators. |
| 125 | + |
| 126 | +Tests for scaffold-ui partials should be placed in `packages/scaffold-ui/test/partials/` with naming convention `[component-name].test.ts`. |
| 127 | + |
| 128 | +### PR Requirements |
| 129 | + |
| 130 | +Before submitting a PR, run `pnpm build` and `pnpm run prettier:format`. Use conventional commit format for PR titles (e.g., `feat: add new feature`, `fix: resolve bug`, `chore: update dependencies`). Bug fixes and new features require tests. Large changes should be discussed in an issue first. |
| 131 | + |
| 132 | +The repository uses DangerJS for automated PR checks including package dependency validation, architectural boundary enforcement, security scanning, and breaking change detection. |
| 133 | + |
| 134 | +## Versioning and Publishing |
| 135 | + |
| 136 | +### Changesets |
| 137 | + |
| 138 | +The repository uses [Changesets](https://github.com/changesets/changesets) for versioning and changelog generation. All `@reown/appkit-*` packages are versioned together as a fixed group. |
| 139 | + |
| 140 | +To create a changeset for your changes: |
| 141 | + |
| 142 | +```bash |
| 143 | +pnpm changeset |
| 144 | +``` |
| 145 | + |
| 146 | +This will prompt you to select affected packages and describe the changes. Changesets are stored in `.changeset/` as markdown files. |
| 147 | + |
| 148 | +### Release Channels |
| 149 | + |
| 150 | +The repository supports multiple release channels: |
| 151 | + |
| 152 | +- `latest` - Stable production releases |
| 153 | +- `alpha` - Alpha pre-releases |
| 154 | +- `beta` - Beta pre-releases |
| 155 | +- `canary` - Canary releases for testing |
| 156 | + |
| 157 | +### Publishing Workflow |
| 158 | + |
| 159 | +Publishing is handled through GitHub Actions workflows: |
| 160 | + |
| 161 | +- `release-start.yml` - Initiates the release process |
| 162 | +- `release-publish.yml` - Publishes packages to npm |
| 163 | +- `release-canary.yml` - Publishes canary releases |
| 164 | +- `publish-prerelease.yml` - Publishes alpha/beta pre-releases |
| 165 | + |
| 166 | +The `@examples/*` and `@apps/*` packages are excluded from publishing. |
| 167 | + |
| 168 | +### CI/CD |
| 169 | + |
| 170 | +PR checks include setup and build, code style validation, unit tests, bundle size checks, and UI tests. The UI tests run in the Laboratory app using Playwright with sharded execution across multiple runners. |
| 171 | + |
| 172 | +Canary tests run in Docker containers and upload timing metrics to CloudWatch for performance monitoring. |
0 commit comments