micro-web3

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

Installation

``bash
npm install micro-web3
`

Usage

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

$3

- 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.

$3

- 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

`javascript
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

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:

`bash
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.