berachain · okjintao · Jun 19, 2025 · Jun 25, 2025 · Jul 1, 2025 · Jul 7, 2025
diff --git a/apps/eip-5792/README.md b/apps/eip-5792/README.md
@@ -0,0 +1,125 @@
+# Berachain MetaMask EIP-5792 Batch Token Approvals
+
+This guide demonstrates how to implement batch token approvals using MetaMask's EIP-5792 functionality on Berachain. The app allows users to approve or revoke multiple token allowances in a single transaction, improving gas efficiency and user experience.
+
+## Requirements
+
+- Node.js 18+ installed
+- MetaMask browser extension installed
+- Berachain testnet configured in MetaMask
+
+## Testnet Tokens
+
+To interact with this app, you'll need testnet tokens on Berachain Bepolia. You can get BERA from the official faucet:
+
+- [Berachain Bepolia Faucet](https://bepolia.faucet.berachain.com)
+
+## Setup
+
+### 1 - Install Dependencies
+
+```bash
+# FROM: ./apps/eip-5792
+pnpm install;
+```
+
+2 - Start Development Server
+
+```bash
+pnpm dev;
+```
+
+3 - Open Browser
+
+```bash
+open http://localhost:5173
+```
+
+## MetaMask Configuration
+
+### Adding Berachain Testnet
+
+1. Open MetaMask
+2. Go to Settings > Networks > Add Network
+3. Add the following details:
+   - **Network Name**: Berachain Bepolia
+   - **RPC URL**: `https://bepolia.rpc.berachain.com` (see [Chainlist](https://chainlist.org/chain/80069) for more options)
+   - **Chain ID**: `80069` (hex: `0x138c5`)
+   - **Currency Symbol**: `BERA`
+   - **Block Explorer URL**: `https://testnet.berascan.com`
+
+## Batch Token Approvals
+
+This guide implements EIP-5792 batch token approvals:
+
+### Example Batch Transaction
+
+- [View on Berascan](https://testnet.berascan.com/tx/0x5d245afc784c2a46d961039afabfc9bc1141605bfab3063df536d2fdd2dca4ed#eventlog)
+
+### Example Reset Batch Transaction
+
+- [View on Berascan](https://testnet.berascan.com/tx/0x1287b521eef218a63c2fe9581db001c28b8d79b4d317b5af65da6283f9df2e48)
+
+### What is EIP-5792?
+
+EIP-5792 is a proposed Ethereum Improvement Proposal that enables batch transaction processing via a standard RPC interface. In this implementation, we use it to bundle multiple token approval transactions into a single atomic operation using MetaMask's batch transaction support.
+
+## Usage
+
+1. **Connect Wallet**: Click "Connect MetaMask" to connect your wallet
+2. **Add Approvals**:
+   - Select tokens from the dropdown
+   - Enter approval amounts
+   - Add more tokens as needed
+3. **Submit Batch**:
+   - Review approval status
+   - Click "Approve Tokens" to submit the batch
+4. **Reset Approvals**:
+   - Use "Reset All Approvals" to revoke permissions
+
+- **Reset Approvals**: This should work the same as approval, but with 0 values for each token.
+
+## Development
+
+### Available Scripts
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm preview` - Preview production build
+- `pnpm lint` - Run ESLint
+
+### Customization
+
+To customize the implementation:
+
+1. **Add Tokens**: Update `TOKENS` array in `App.tsx`
+2. **Modify UI**: Edit styles in `global.css`
+3. **Extend Features**: Add more batch operations
+4. **Update Configuration**: Modify chain config in `main.tsx`
+
+## Troubleshooting
+
+### Common Issues
+
+1. **MetaMask Not Detected**
+
+   - Ensure MetaMask extension is installed
+   - Check if MetaMask is unlocked
+
+2. **Network Issues**
+
+   - Verify Berachain testnet configuration
+   - Check RPC endpoint availability
+   - Ensure you have testnet tokens
+
+3. **Approval Failures**
+   - Check token balances
+   - Verify spender address format
+   - Ensure sufficient gas for batch transaction
+
+## Resources
+
+- [Berachain Documentation](https://docs.berachain.com/)
+- [EIP-5792 Specification](https://eips.ethereum.org/EIPS/eip-5792)
+- [MetaMask Documentation](https://docs.metamask.io/)
+- [wagmi Documentation](https://wagmi.sh/)
diff --git a/apps/eip-5792/eslint.config.js b/apps/eip-5792/eslint.config.js
@@ -0,0 +1,3 @@
+import guides from "../../packages/eslint-config/guides.js";
+
+export default guides; 
diff --git a/apps/eip-5792/index.html b/apps/eip-5792/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Berachain MetaMask EIP-5792 Guide</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html> 
diff --git a/apps/eip-5792/package.json b/apps/eip-5792/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "berachain-eip-5792",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "test": "jest",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbowkit": "^2.0.5",
+    "@wagmi/connectors": "^5.8.5",
+    "ethers": "^6.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.5.22",
+    "wagmi": "^2.5.22"
+  },
+  "devDependencies": {
+    "@berachain/eslint-config": "workspace:*",
+    "@berachain/typescript-config": "workspace:*",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jest": "^29.5.0",
+    "prettier": "^3.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.4.19"
+  }
+}
diff --git a/apps/eip-5792/public/vite.svg b/apps/eip-5792/public/vite.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import guides from "../../packages/eslint-config/guides.js";

		export default guides;