A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.
npm install @monygroupcorp/micro-web3A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.
``bash`
npm install micro-web3
This package provides a set of services and UI components to accelerate Web3 development.
- 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.
- 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.
`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.