@ankrlabs/widgets

React widgets for AlignMint Full-Reserve protocol - mint and unmint operations.

Installation

npm install @ankrlabs/widgets

Usage

Basic Usage

import { MintUnmintWidget } from '@ankrlabs/widgets';

function App() {
  return (
    <MintUnmintWidget 
      appChainId={1} 
      wagmiConfig={wagmiConfig} 
    />
  );
}

With Custom Providers

import { MintUnmintWidget } from '@ankrlabs/widgets';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from '@privy-io/wagmi';
import { PrivyProvider } from '@privy-io/react-auth';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <PrivyProvider appId="your-privy-app-id">
        <WagmiProvider config={wagmiConfig}>
          <MintUnmintWidget 
            appChainId={1} 
            wagmiConfig={wagmiConfig} 
          />
        </WagmiProvider>
      </PrivyProvider>
    </QueryClientProvider>
  );
}

Props

MintUnmintWidget

| Prop | Type | Required | Description | |------|------|----------|-------------| | appChainId | number | ✅ | The chain ID for the application | | wagmiConfig | Config | ✅ | Wagmi configuration object |

Development

Prerequisites

• Node.js 18+
• Yarn 4+

Setup

# Install dependencies
yarn install

# Build the library
yarn build

# Run development server
yarn dev

Scripts

• yarn build - Build the library for production
• yarn dev - Start development server (uses source files)
• yarn dev:built - Start development server with built files from dist/
• yarn lint - Run ESLint
• yarn lint:fix - Fix ESLint errors
• yarn typecheck - Run TypeScript type checking

Testing Built Files

To test the production build locally in examples:

# 1. Build the library first
yarn build

# 2. Run dev server with built files
yarn dev:built

This allows you to test the actual production build (dist/) before publishing to npm.