micro-web3

A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.

Installation

npm install micro-web3

Usage

This package provides a set of services and UI components to accelerate Web3 development.

Services

• BlockchainService: A service for interacting with smart contracts.
• WalletService: Handles wallet connection, detection, and interactions.
• ContractCache: Provides TTL-based caching for blockchain contract reads.
• PriceService: A service for polling for price and other contract data.
• IpfsService: A light client for IPFS resolution with gateway rotation and fallback.

UI Components

• WalletSplash: Blocks access to content until a wallet is connected.
• WalletModal: A modal for selecting a wallet.
• IpfsImage: Renders images with IPFS support.
• SwapInterface: A full-featured swap interface for buying and selling tokens.
• BondingCurve: A component for rendering a bonding curve chart.
• PriceDisplay: Displays the price of a token.
• BalanceDisplay: Displays the user's token balances.
• MessagePopup: A component for showing toast-like notifications.
• ApprovalModal: A modal for approving token spending.
• TransactionOptions: A component for setting transaction options like a message.
• SwapInputs: The input fields for a swap interface.
• SwapButton: The main button for a swap interface.

Example

import { Component, EventBus } from 'microact';
import { 
    BlockchainService, 
    WalletService, 
    ContractCache, 
    PriceService, 
    SwapInterface 
} from 'micro-web3';

// 1. Set up services
const eventBus = new EventBus();
const contractCache = new ContractCache(eventBus);
const blockchainService = new BlockchainService(eventBus, contractCache);
const walletService = new WalletService(eventBus);
const priceService = new PriceService(blockchainService, eventBus);

// 2. Initialize services
await blockchainService.initialize(networkConfig);
await blockchainService.initializeContract(contractAddress, contractAbi, mirrorAbi, routerAbi);
await walletService.initialize();
priceService.initialize(walletService.getAddress());

// 3. Create a component
class MyApp extends Component {
    constructor() {
        super();
        this.swapInterface = new SwapInterface({
            blockchainService,
            eventBus,
            // ... other props
        });
    }

    render() {
        return `
            <div>
                <h1>My dApp</h1>
                <div data-ref="swap-interface-container"></div>
            </div>
        `;
    }

    onMount() {
        this.swapInterface.mount(this.refs['swap-interface-container']);
    }
}

Local Anvil Workflow

For a zero-config local fork, use the web3 template from create-microact-app:

npx create-microact-app my-web3-app --template web3
cd my-web3-app
cp .env.example .env.local   # set USER_ADDRESS to your wallet if you want auto-funding
npm run chain:start          # starts an Anvil fork, deploys Counter.sol, funds USER_ADDRESS
npm run dev                  # launches Vite with Microact + Micro Web3 UI

The template provisions a Foundry workspace, an anvil bootstrap script, and a Counter component that talks to the freshly deployed contract using the services exported by this package.