npm package: @monygroupcorp/micro-web3
Description: A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.
Author: arthurt
Latest version: 1.4.3

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

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

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

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