177 lines
3.9 KiB
Markdown
177 lines
3.9 KiB
Markdown
# Smart Accounts Examples
|
|
|
|
Complete examples demonstrating Smart Accounts Kit integration on ChainID 138.
|
|
|
|
---
|
|
|
|
## Available Examples
|
|
|
|
### 1. TypeScript Example (`smart-accounts-example.ts`)
|
|
|
|
**Type**: TypeScript/Node.js
|
|
**Use Case**: Backend integration, testing, automation
|
|
|
|
**Features**:
|
|
- Complete Smart Accounts Kit integration
|
|
- Account creation
|
|
- Delegation management
|
|
- Permission requests
|
|
- Batch operations
|
|
- AccountWalletRegistry integration
|
|
|
|
**Usage**:
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Run with ts-node
|
|
npx ts-node examples/smart-accounts-example.ts
|
|
```
|
|
|
|
---
|
|
|
|
### 2. React Example (`smart-accounts-react-example/`)
|
|
|
|
**Type**: React + TypeScript
|
|
**Use Case**: Frontend dApp integration
|
|
|
|
**Features**:
|
|
- React hooks for Smart Accounts
|
|
- Wallet connection
|
|
- Smart Account creation
|
|
- Delegation UI
|
|
- Real-time status updates
|
|
|
|
**Usage**:
|
|
```bash
|
|
cd examples/smart-accounts-react-example
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
**Documentation**: See `smart-accounts-react-example/README.md`
|
|
|
|
---
|
|
|
|
### 3. Vue.js Example (`smart-accounts-vue-example/`)
|
|
|
|
**Type**: Vue 3 + TypeScript
|
|
**Use Case**: Frontend dApp integration (Vue ecosystem)
|
|
|
|
**Features**:
|
|
- Vue 3 Composition API
|
|
- Wallet connection
|
|
- Smart Account creation
|
|
- Delegation UI
|
|
- Reactive state management
|
|
|
|
**Usage**:
|
|
```bash
|
|
cd examples/smart-accounts-vue-example
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
**Documentation**: See `smart-accounts-vue-example/README.md`
|
|
|
|
---
|
|
|
|
### 4. HTML/JavaScript Example (`smart-accounts-example.html`)
|
|
|
|
**Type**: Vanilla HTML/JavaScript
|
|
**Use Case**: Simple demos, quick prototypes, learning
|
|
|
|
**Features**:
|
|
- No build step required
|
|
- Simple HTML page
|
|
- Basic Smart Accounts functionality
|
|
- Easy to understand and modify
|
|
|
|
**Usage**:
|
|
```bash
|
|
# Open in browser
|
|
open examples/smart-accounts-example.html
|
|
```
|
|
|
|
**Note**: This is a simplified example. For production, use React or Vue examples.
|
|
|
|
---
|
|
|
|
## Configuration
|
|
|
|
All examples require configuration with deployed contract addresses:
|
|
|
|
1. **Deploy contracts** (see [Deployment Guide](../docs/QUICK_START_DEPLOYMENT.md))
|
|
2. **Update configuration** in `config/smart-accounts-config.json`:
|
|
```json
|
|
{
|
|
"chainId": 138,
|
|
"rpcUrl": "https://rpc.d-bis.org",
|
|
"entryPointAddress": "0x...",
|
|
"accountFactoryAddress": "0x...",
|
|
"paymasterAddress": "0x..." // optional
|
|
}
|
|
```
|
|
3. **Update examples** to load configuration
|
|
|
|
---
|
|
|
|
## Common Features
|
|
|
|
All examples demonstrate:
|
|
|
|
1. **Wallet Connection**: Connect to MetaMask
|
|
2. **Smart Account Creation**: Create a new Smart Account
|
|
3. **Delegation**: Request and manage delegations
|
|
4. **Permissions**: Request Advanced Permissions (ERC-7715)
|
|
5. **Batch Operations**: Execute multiple operations in one transaction
|
|
|
|
---
|
|
|
|
## Documentation
|
|
|
|
- [Developer Guide](../docs/SMART_ACCOUNTS_DEVELOPER_GUIDE.md)
|
|
- [API Reference](../docs/SMART_ACCOUNTS_API_REFERENCE.md)
|
|
- [Delegation Guide](../docs/DELEGATION_USAGE_GUIDE.md)
|
|
- [Advanced Permissions Guide](../docs/ADVANCED_PERMISSIONS_GUIDE.md)
|
|
- [Quick Start Deployment](../docs/QUICK_START_DEPLOYMENT.md)
|
|
|
|
---
|
|
|
|
## Requirements
|
|
|
|
### Prerequisites
|
|
|
|
- **MetaMask**: Installed and configured
|
|
- **Node.js**: v18 or higher (for React/Vue examples)
|
|
- **Network**: ChainID 138 added to MetaMask
|
|
- **Contracts**: Smart Accounts contracts deployed
|
|
|
|
### Dependencies
|
|
|
|
- `@metamask/smart-accounts-kit`: Smart Accounts Kit SDK
|
|
- `ethers`: Ethereum library (v6.0.0+)
|
|
|
|
---
|
|
|
|
## Getting Started
|
|
|
|
1. **Choose an example** based on your framework preference
|
|
2. **Install dependencies**: `npm install`
|
|
3. **Configure**: Update configuration with contract addresses
|
|
4. **Run**: Follow example-specific instructions
|
|
5. **Test**: Connect wallet and create Smart Account
|
|
|
|
---
|
|
|
|
## Support
|
|
|
|
For issues or questions:
|
|
- Check [Troubleshooting Guide](../docs/SMART_ACCOUNTS_TROUBLESHOOTING.md)
|
|
- Review [FAQ](../docs/SMART_ACCOUNTS_FAQ.md)
|
|
- See [Developer Guide](../docs/SMART_ACCOUNTS_DEVELOPER_GUIDE.md)
|
|
|
|
---
|
|
|
|
**Last Updated**: 2026-01-26
|