Final QA items (#10)

* Update docs.json with onchain app dev structure

* Fix mdx styling syntax

* Fix storybook sizing

* Replace Callout components with proper components

Author: ericbrown99

.cursor/rules/general.mdc

@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Don't edit or use the /_pages directory. The files we're editing are in the /docs directory 

docs/CLAUDE.md

@@ -0,0 +1,98 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Repository Overview
+
+This is the **Base Documentation** repository, a comprehensive documentation site for Base (Ethereum Layer 2 blockchain) built with **Mintlify**. The repository covers blockchain development from basics to advanced topics including smart contracts, onchain apps, and Base ecosystem tools.
+
+## Key Commands
+
+### Local Development
+```bash
+# Install Mintlify CLI globally (required for local development)
+npm i -g mintlify
+
+# Run local development server
+mintlify dev
+
+# Reinstall dependencies if mintlify dev fails
+mintlify install
+```
+
+### Storybook Development
+```bash
+cd storybook
+npm install
+npm run storybook  # Runs on port 6006
+npm run build-storybook
+```
+
+## Architecture and Structure
+
+### Documentation Organization
+- **Tab-based navigation** with 7 main sections in `docs.json`:
+  - Get Started (introduction, quickstarts)
+  - Base Chain (network info, node operations) 
+  - Smart Wallet (account abstraction)
+  - OnchainKit (React components)
+  - Wallet App (MiniKit development)
+  - Cookbook (use-case guides)
+  - Learn (educational content)
+
+### File Structure
+- **Main content**: All documentation files are in `/docs` directory as `.mdx` files
+- **Configuration**: `docs.json` defines navigation structure and site settings
+- **Images**: Organized in `/images` with subdirectories by topic
+- **Custom components**: React components available in `/snippets`
+- **Styling**: `custom.css` for site-wide styles, `iframe-theme.js` for theme handling
+
+### Content Types
+- **Educational tutorials** (Learn section with Solidity, Ethereum basics)
+- **Practical guides** (Cookbook with real-world implementation examples)
+- **API documentation** (OnchainKit components and utilities)
+- **Tool documentation** (Smart Wallet, development frameworks)
+
+## Development Workflow
+- Use sub-agents to help complete tasks
+- Leverage the Github CLI tool to create commits for changes and to read the history of changes
+- If you create scratch files for problem solving, remove them when you are done with them. 
+
+### Content Editing
+- Edit `.mdx` files directly in `/docs` directory (NOT `/_pages`)
+- Use Mintlify syntax for enhanced documentation features
+- Changes are automatically deployed via Mintlify GitHub App when pushed to default branch
+
+### Component Development
+- Storybook setup in `/storybook` directory for UI component development
+- Components integrated into documentation via iframe embedding
+- Chromatic integration for visual testing and regression detection
+
+### Important Rules
+- **Never edit files in `/_pages` directory** - all documentation files are in `/docs`
+- Use Mintlify CLI for local development and testing
+- Follow existing navigation structure defined in `docs.json`
+- Images should be placed in appropriate `/images` subdirectories
+
+## Special Features
+
+### AI Integration
+- Contextual AI options (ChatGPT, Claude) available in documentation interface
+- Large `llms-full.txt` file (11,496 lines) provides comprehensive AI context
+- AI prompting guides integrated throughout documentation
+
+### Interactive Components
+- Storybook components embedded via iframes for interactive examples
+- Dark/light mode support with custom theme handling
+- Custom React components available for enhanced documentation experiences
+
+### Cross-referencing
+- Extensive internal linking between related topics
+- Progressive learning paths from beginner to advanced
+- Use-case driven organization alongside technical reference material
+
+## Deployment
+
+- **Automatic deployment** via Mintlify GitHub App when changes are pushed to default branch
+- **Storybook deployment** to Chromatic for component library hosting
+- No manual deployment steps required for documentation updates

docs/base-chain/network-information/ecosystem-contracts.mdx

@@ -66,11 +66,9 @@ This page lists contract addresses for onchain apps that we have deployed.
 
 #### Testnet interfaces
 
-:::info
-
+<Info>
 Two community projects, [BaseX](https://basex-test.vercel.app/swap?currencyA=ETH&currencyB=0x036CbD53842c5426634e7929541eC2318f3dCF7e&focus=source) and [DapDap](https://testnet.base.dapdap.net/uniswap/swap), provide testnet interfaces for Uniswap contracts if you prefer to interact in the browser instead of with the contracts directly.
-
-:::
+</Info>
 
 ### Uniswap v2
 

docs/base-chain/node-operators/run-a-base-node.mdx

@@ -56,7 +56,7 @@ You'll need your own L1 RPC URL. This can be one that you run yourself, or via a
 3. Uncomment the line relevant to your network (`.env.sepolia`, or `.env.mainnet`) under the 2 `env_file` keys in `docker-compose.yml`.
 4. Run `docker compose up`. Confirm you get a response from:
 
-```bash [Terminal]
+```bash Terminal
 curl -d '{"id":0,"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false]}' \
   -H "Content-Type: application/json" http://localhost:8545
 ```
@@ -90,7 +90,7 @@ You'll then need to untar the downloaded snapshot and place the `geth` subfolder
 
 Return to the root of your Base node folder and start your node.
 
-```bash [Terminal]
+```bash Terminal
 cd ..
 docker compose up --build
 ```
@@ -103,7 +103,7 @@ Check the latest block to make sure you're syncing from the snapshot and that it
 
 You can monitor the progress of your sync with:
 
-```bash [Terminal]
+```bash Terminal
 echo Latest synced block behind by: $((($(date +%s)-$( \
   curl -d '{"id":0,"jsonrpc":"2.0","method":"optimism_syncStatus"}' \
   -H "Content-Type: application/json" http://localhost:7545 | \

docs/base-chain/tools/onchain-registry-api.mdx

@@ -31,7 +31,7 @@ This endpoint will display all Onchain Registry entries subject to any query par
 
 #### Response
 
-```json [JSON]
+```json JSON
 {
     "data": [
         {
@@ -98,7 +98,7 @@ This endpoint will display a single Onchain Registry entry that is being activel
 
 #### Response
 
-```json [JSON]
+```json JSON
 {
     "data": {
         "id": "7AsRdN8uf601fCkH1e084F",

docs/base-chain/tools/tokens-in-wallet.mdx

@@ -9,9 +9,11 @@ Coinbase Wallet makes any ERC-20 token instantly available for swapping seconds
 
 Follow the instructions below to ensure your token logo, asset name, and other metadata also appear on Coinbase Wallet.
 
-:::info[Disclaimer]
+<Info>
+**Disclaimer**
+
 Base does not endorse any specific token that is deployed on mainnet and made available for swapping.
-:::
+</Info>
 
 ---
 
@@ -41,9 +43,11 @@ However, you’ll still need to list your token on Birdeye, CoinGecko, or CoinMa
 
 Tokens that are newly launched and haven’t had significant trading volume appear in the **newer token** section. Once your token reaches a market cap of at least $1M it will no longer be displayed in this section.
 
-:::info[Disclaimer]
+<Info>
+**Disclaimer**
+
 New assets with low liquidity may result in failed swaps or may result in a user receiving less of the destination token due to slippage. An important responsibility of the token creator is to communicate to the community these risks.
-:::
+</Info>
 
 ## How can I update my token logo or description? 
 

docs/cookbook/defi-your-app.mdx

@@ -116,7 +116,7 @@ You can get a vault address from Morpho's [Vaults page](https://app.morpho.org/b
 </Info>
 
 
-```tsx twoslash
+```tsx
 // @noErrors: 2307
 import { Earn } from '@coinbase/onchainkit/earn'; // [!code focus]
 
@@ -261,7 +261,7 @@ This component requires a `projectId` to be set in the `OnchainKitProvider`. You
 </Note>
 
 
-```tsx twoslash
+```tsx
 import { Buy } from '@coinbase/onchainkit/buy'; // [!code focus]
 import type { Token } from '@coinbase/onchainkit/token';