Universal Account Tutorial with Viem

This tutorial demonstrates how to integrate Particle Network's Universal Accounts into your dApp using viem for wallet connection and transaction execution.

Features

1. Wallet Connection with Viem

   • Connect with MetaMask using viem
   • Handle wallet state and events
   • Manage wallet reconnection

2. Universal Account Creation

   • Initialize Universal Account with user's EOA
   • Configure account settings including gas payment options

3. Account Information

   • View EVM smart account address
   • View Solana smart account address
   • Check unified token balances across chains
   • Explore detailed portfolio breakdown

4. Universal Transactions

   • Execute a simple USDT request on Avalanche
   • Handle transaction states and errors
   • View transaction details on Universal Explorer

Getting Started

1. Clone the repository:

   git clone https://github.com/soos3d/universal-accounts-viem-starter.git
   cd universal-accounts-viem-starter/ethers-universal-accounts

2. Install dependencies:

   npm install
   # or
   yarn

3. Configure environment variables: Create a .env.local file with your Particle Network credentials:

   NEXT_PUBLIC_PROJECT_ID=your_project_id
   NEXT_PUBLIC_CLIENT_KEY=your_client_key
   NEXT_PUBLIC_APP_ID=your_app_id
   

   You can obtain these credentials by creating a project in the Particle Network Dashboard

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser to see the demo.

Implementation Guide

1. Connect Wallet with Viem

   • The app uses viem's createWalletClient to connect to MetaMask
   • User's EOA address is captured and stored in state
   • Wallet connection is managed with proper error handling

2. Initialize Universal Account

   • A Universal Account instance is created using the connected wallet as the owner
   • Account configuration includes slippage settings and universal gas options
   • The SDK handles the creation and management of smart accounts

3. View Account Information

   • The app fetches and displays both EVM and Solana smart account addresses
   • Token balances across all chains are retrieved and shown in a unified view
   • A detailed portfolio breakdown is available showing tokens by chain

4. Execute Universal Transactions

   • Users can request test USDT on Avalanche
   • The transaction flow demonstrates:
     • Creating a universal transaction
     • Signing with the connected wallet
     • Sending the transaction through Universal Account
     • Viewing transaction results

Project Structure

• app/page.tsx - Main component with wallet connection and Universal Account logic
• app/components/WalletConnection.tsx - Handles wallet connection UI and state
• app/components/AccountInfo.tsx - Displays account addresses and balances
• app/components/Portfolio.tsx - Shows detailed token breakdown by chain

Learn More

• Universal Account SDK Documentation
• Viem Documentation
• Particle Network Dashboard